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

ztj100 2024-11-26 11:16 21 浏览 0 评论

双向绑定思路就是在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')

vue3 deep

上一篇：使用vite-vue3-ts快速上手做一个todolist
下一篇：12.图像编码解码-imencode-imdecode-base64

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

相关推荐

取消回复欢迎你发表评论:

Vue自定义Hook示例:useUrlState（vue中的自定义指令如何使用）

Vue-实现自定义插件弹窗（vue 实现弹窗）

旗舰机新标杆 OPPO Find X2系列正式发布售价5499元起

什么是幂等?分布式锁如何实现业务幂等?

【Python机器学习系列】建立多层感知机模型预测心脏疾病

如何发个 npm 包?

详解MySQL 字符串拼接之concat\concat_ws\group_concat

手把手教你搞定菜单权限设计，精确到按钮级别，建议收藏

如何快速切换node版本?利用n包快速切换nodejs版本

让Jenkins自动部署你的Vue项目「实践」

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

相关推荐

取消回复欢迎 你 发表评论:

Vue自定义Hook示例:useUrlState（vue中的自定义指令如何使用）

Vue-实现自定义插件弹窗（vue 实现弹窗）

旗舰机新标杆 OPPO Find X2系列正式发布 售价5499元起

什么是幂等?分布式锁如何实现业务幂等?

【Python机器学习系列】建立多层感知机模型预测心脏疾病

如何发个 npm 包?

详解MySQL 字符串拼接之concat\concat_ws\group_concat

手把手教你搞定菜单权限设计，精确到按钮级别，建议收藏

如何快速切换node版本?利用n包快速切换nodejs版本

让Jenkins自动部署你的Vue项目「实践」

取消回复欢迎你发表评论:

旗舰机新标杆 OPPO Find X2系列正式发布售价5499元起