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)
});
原文出处:http://www.dongblog.com/notes/5.html
来源:博客网 转载请注明出处!

活跃用户

客服(小雅)-云中客
Ta还没有签名
技术开发部-李腾飞
Ta还没有签名
沉思的老面馒头
Ta还没有签名
绝非?偶然
Ta还没有签名

友情链接


Warning: Smarty error: unable to read resource: "../../../templates/default/./common/foot/footer_index.htm" in /usr/home/hyu3925200001/htdocs/common/smarty/Smarty.class.php on line 1093

Warning: Smarty error: unable to read resource: "../../../templates/default/./common/foot/footer_index.htm" in /usr/home/hyu3925200001/htdocs/common/smarty/Smarty.class.php on line 1093