博主:DongJiang
码龄:7年
等级:LV.22级
内容:316
今日访问:2312
访问总量:5941
博客简介:学习与分享
博客创建时间:2018-04-12
博客主页 立即前往
赞助位
成为赞助商

Vue3父组件与子组件双向数据传值展示和修改

来源: 2023-06-23 11:52:52 播报

子组件中通过computed计算属性监测到值变化后,向父组件发送消息并更改父组件值

1、父组件引用子组件使用双向数据绑定[v-model:content=content]

2、组件通过props读取父组件的content字段

3、并通过computed计算属性获取值并赋予一个变量,然后再将变量绑定到表单上。此时当子组件表单值发生改变后,computed会重新计算并把最新的值通过emit向父组件传递值,因此达到了子组件更改父组件传值

const value: any = computed({
      get: () => props.content,
      set: (val) => context.emit('update:content', val)
});
原文出处:
版权声明:本文来源地址若非本站均为转载,若侵害到您的权利,请及时联系我们,我们会在第一时间进行处理。