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去监听。
标签:name,props,state,context,vue3,组件,emit
From: https://www.cnblogs.com/huihuihero/p/16943926.html