Vue3快速上手（十二）props的使用

最新推荐文章于 2025-07-04 14:54:43 发布

原创最新推荐文章于 2025-07-04 14:54:43 发布 · 1.2k 阅读

10 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #前端 #props #vue3 #vue3props

Vue 专栏收录该内容

21 篇文章

订阅专栏

文章详细介绍了如何在Vue中使用props从父组件向子组件传递静态和动态数据，以及如何实现响应式对象的更新。通过实例展示了如何定义Props和接收数据，以及在父组件动态修改数据时子组件的更新表现。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在这里插入图片描述

一、简单示例

父组件在调用子组件时，给子组件标签加属性，子组件接收该属性的，并展示对应的值。
子组件具体是通过defineProps([属性1，属性2......])来接收数据的。// 是一个数组，接收多个值。

下面是父组件的示例：

<template>
    <div class="person">
        <h2>props-父</h2>
        <h3>父姓名：{{ person.name }}</h3>
        <h3>父年龄：{{ person.age }}</h3>
        <hr>
        <PropsSon a="你好呀，儿子"></PropsSon>
        <!-- <button @click="getRef">获取ref标签内容</button> -->
    </div>
</template>
<script lang='ts' setup name="PropsPerson">
import { reactive } from 'vue'
import PropsSon from './propsSon.vue';

let person = reactive(
    {
        name: "李四",
        age: 99
    }
)
</script>

下面是子组件示例：

<template>
    <div class="person" >
        <h2>props-子</h2>
        <h3>子姓名：{{ son.name }}</h3>
        <h3>子年龄：{{ son.age }}</h3>
        <h3>父组件的值a：{{ a }}</h3>
    </div>
</template>
<script lang='ts' setup name="PropsSon">
import { reactive, ref, defineExpose } from 'vue'
let son = reactive(
    {
        name: "李儿子",
        age: 18,
    }
)
// 接收一个数组，接收多个值
defineProps(['a'])
</script>

效果如下：
在这里插入图片描述

二、传递响应式对象示例

父组件传递响应式数据给子组件,父级动态修改该数据，子组件正常显示。
数据传递方式还是一样的，通过属性+defineProps的方式进行。但此时属性是动态属性:parentAddrs="addrs"
下面是父组件代码示例：

<template>
    <div class="person">
        <h2>props-父</h2>
        <h3>父姓名：{{ person.name }}</h3>
        <h3>父年龄：{{ person.age }}</h3>
        <button @click="addAddr">父加一条地址</button>
        <hr>
        <PropsSon a="你好呀，儿子" :parentAddrs="addrs"></PropsSon>
    </div>
</template>
<script lang='ts' setup name="PropsPerson">
import { reactive, ref } from 'vue'
import PropsSon from './propsSon.vue';

let person = reactive(
    {
        name: "李四",
        age: 99,
    }
)

let addrs = reactive([
    { id: 1, addrName: '家里', city: '北京朝阳区', detail: '朝阳街1号' },
    { id: 2, addrName: '公司', city: '北京海淀区', detail: '海淀1号' },
    { id: 3, addrName: '老家', city: '山西省大同市', detail: '中央大街1号' }
])

function addAddr() {
    let id = Math.floor(Math.random() * 1000) // 可能重复，这里只是示例
    addrs.push({ id: id, addrName: '新地址' + id, city: '新地址朝阳区', detail: '新地址朝阳街1号' })
}
</script>

下面是子组件代码示例：

<template>
    <div class="person" >
        <h2>props-子</h2>
        <h3>子姓名：{{ son.name }}</h3>
        <h3>子年龄：{{ son.age }}</h3>
        <h3>父组件的值a：{{ a }}</h3>
        父的地址：
        <ul v-for="item in parentAddrs" key="item.id">
            <li>{{ item.addrName }} - {{ item.city }}{{ item.detail }}</li>
        </ul>
    </div>
</template>
<script lang='ts' setup name="PropsSon">
import { reactive, ref, defineExpose } from 'vue'
let son = reactive(
    {
        name: "李儿子",
        age: 18,
    }
)

// 接收一个数组，接收多个值
defineProps(['a','parentAddrs'])
</script>