父子组件通信，Vue3的props基本使用

基本使用

在子组件中直接写 defineProps() ，他是一个在 <script setup> 中使用的编译宏命令，并不需要显式地导入。代码如下：

父组件

父组件中，使用了list-props这个子组件，其中在子组件加上了:list和title属性，这两个属性的值就是要传给子组件的数据。

<list-props :list="datalist" title="goodslist"></list-props>

import listProps from './childComponent/listProps.vue'
import {ref} from 'vue'

const datalist = ref([
    {
        name: 'xiaomi'
    },
    { 
        name: 'redmi'
    },
    { 
        title: 'apple'
    }
])

子组件中

子组件中使用了defineProps(), 里面的参数是一个数组，其中包含了在父组件中写的属性。可以直接在模板中使用收到的数据，并且数据是响应式的，当你在父组件中修改了数据子组件也随之改变。defineProps()的返回值里面包含了传递来的所有props。

<div>
   <h1>{{ title }}</h1>
   <div v-for="item in list" :key="item"> {{ item.name }} </div>
</div>

const props = defineProps(['list', 'title'])

最终渲染结果