在上一篇中讲解了父子组件之间是如何传值的，如果子组件需要改变传过来的数据供自己使用，或者想在子组件中改变传过来的数据并同步到父组件，那么直接改肯定是不行的，如果你这么做了，Vue 会在控制台给出警告。
对应这两种情况，解决方式如下：
先创建项目并运行
vue init webpack-simple template
cd template
npm i
npm run dev
一、 子组件需要改变传过来的数据供自己使用
1. 定义一个局部变量，并用 props 的值来初始化它
在 App.vue 中
我是 App 父组件
访问自己的数据：{{msg}},{{name}},{{user.id}}
<!-- 1. 在调用子组件时，绑定想要获取的父组件中的数据 -->
在 Hello.vue 中
我是 hello 子组件
<!-- 在页面中直接渲染即可 -->访问父组件中的数据： {{msg}}
效果图：
子组件改变父组件的数据
2. 定义一个计算属性，处理 prop 的值并返回：
在 Hello.vue 中改动
当页面渲染成功自动完成计算
二、子组件中改变传过来的数据并同步到父组件
1. 使用 sync 修饰符，它会被扩展为一个自动更新父组件属性的 v-on 监听器
在 App.vue 中把 template 的内容更改为
我是 App 父组件
访问自己的数据：{{msg}}
<!-- 1. 在调用子组件时，绑定想要获取的父组件中的数据 --> <!-- .sync 会被扩展为一个自动更新父组件属性的 v-on 监听器 -->
在 Hello.vue 中更改为
我是 hello 子组件
<!-- 在页面中直接渲染即可 -->访问父组件中的数据： {{message}}
效果为：
2. 可以将父组件中的数据包装成对象或数组，然后在子组件中修改对象的属性
在 App.vue 中
我是 App 父组件
访问自己的数据：{{user.userName}}
<!-- 2. 在调用子组件时，绑定想要获取的父组件中的数据 -->
在 Hello.vue 中
我是 hello 子组件
<!-- 5. 在页面中直接渲染即可 -->访问父组件中的数据： {{user.userName}}
效果如下：
我们是不允许直接修改父组件传过来的数据或对象的，而这种方法更改的是对象中的属性，因为对象是引用类型，指向同一内存空间，所以可以实现此效果。推荐使用该方式
]
来自 “ ITPUB博客 ” ，链接：https://blog.itpub.net/4715/viewspace-2804185/ ，如需转载，请注明出处，否则将追究法律责任。
请登录后发表评论
登录
全部评论
