栏目分类:
子分类:
返回
名师互学网用户登录
快速导航关闭
当前搜索
当前分类
子分类
实用工具
热门搜索
名师互学网 > IT > 软件开发 > Web开发 > Vue.js

父子组件间单向数据流的解决办法

Vue.js 更新时间: 发布时间: IT归档 最新发布 模块sitemap 名妆网 法律咨询 聚返吧 英语巴士网 伯小乐 网商动力

父子组件间单向数据流的解决办法

在上一篇中讲解了父子组件之间是如何传值的,如果子组件需要改变传过来的数据供自己使用,或者想在子组件中改变传过来的数据并同步到父组件,那么直接改肯定是不行的,如果你这么做了,Vue 会在控制台给出警告。

对应这两种情况,解决方式如下:

先创建项目并运行

vue init webpack-simple template
cd template
npm i
npm run dev

一、 子组件需要改变传过来的数据供自己使用1. 定义一个局部变量,并用 props 的值来初始化它

在 App.vue 中

在 Hello.vue 中

效果图:


子组件改变父组件的数据

2. 定义一个计算属性,处理 prop 的值并返回:

在 Hello.vue 中改动

当页面渲染成功自动完成计算


二、子组件中改变传过来的数据并同步到父组件1. 使用 sync 修饰符,它会被扩展为一个自动更新父组件属性的 v-on 监听器

在 App.vue 中把 template 的内容更改为

在 Hello.vue 中更改为

效果为:


2. 可以将父组件中的数据包装成对象或数组,然后在子组件中修改对象的属性

在 App.vue 中

在 Hello.vue 中

效果如下:


我们是不允许直接修改父组件传过来的数据或对象的,而这种方法更改的是对象中的属性,因为对象是引用类型,指向同一内存空间,所以可以实现此效果。推荐使用该方式


]


转载请注明:文章转载自 www.mshxw.com
本文地址:https://www.mshxw.com/it/241551.html
我们一直用心在做
关于我们 文章归档 网站地图 联系我们

版权所有 (c)2021-2022 MSHXW.COM

ICP备案号:晋ICP备2021003244-6号