vue3 组件数据双向绑定及事件传递

双向绑定思路就是在setup中将props接收的数据进行解构到一个新的对象中（实则就是进行了浅拷贝），这个对象被ref包裹,是它成为响应式数据，然后呢我们用watch来鉴定这个值，一旦这个值发生了变化以后，用emit('modelValue')将新的数据发射到父组件中，进行接收

//子组件

props: {

modelValue: {

type: Object,

required: true

},

}

emits: ['update:modelValue'],

setup(props, { emit }) {

//浅拷贝

const formData = ref({ ...props.modelValue })

watch(formData, (newVal) => emit('update:modelValue', newVal), {

deep: true

})

return { formData }

}

自定义事件更简单了，父组件通过 @eventname="xxxx" 传递给子组件，子组件中 $emit("eventname") 触发父组件方法。

<save-dialog v-if="dialog.save" ref="saveDialog" @success="handleSuccess" ></save-dialog>

在子组件调用

this.$emit('success')