vue3组件通信，网上一大堆，这里直说常用的两个，props,emit

props（父传子，多用于 子组件的数据渲染）

【父】
<div>
    <comp-son :name="name" :age="age" />  //向子组件传值
</div>

setup() {
        const state = reactive({
            name: "Jack",
            age: 18  
        })
        return {
            ...toRefs(state)
        }
    },

【子】
export default {
    name: "CompSon",
    // props: ['name', 'age'],  //接收父组件的传值：简写形式
    props: {  //接收父组件的传值：详细形式
        name: String,  //传入值类型
        age: {
            type: Number,  // 传入值类型
            required: true,  // 是否必须
            default: 18,  // 该属性没有进行传值时的默认值
        }
    },
    setup(props, context) {
        console.log(props.name)
        console.log(props.age)

    },
};

emit（子传父，多用于 子组件修改父组件的值）

【父】
<div>
    <comp-son @setName="setName" />  //向子组件传函数
</div>

setup() {
        const state = reactive({
            name: "Jack",
        })

        function setName(name){
            state.name = name
        }

        return {
            ...toRefs(state)
        }
    },

【子】
export default {
    name: "CompSon",
    setup(props, context) {
        context.emit("setName", "Bob")  //接收父组件函数并调用
        // context可获取三个属性，分别为context.attrs、context.emit、context.slots
    },
};

拓展

v-model 子组件给父组件传值

这个v-model其实是个语法糖。就是当子组件emit触发的事件名固定写死为update的时候，可以使用v-model去监听。