1.Vue的单项数据流:指数据一般从父组件传到子组件,子组件没有权利直接修改

父组件传来的数据,即子组件从props中直接获取的数据,只能请求父组件修改数据

再传给子组件。父组件属性值的更新会下行流动到子组件中。

2.为什么不能子组件直接修改父组传来的值呢？父组件的值可能会不断发生变化，那么

如果我们子组件对父组件传来的值比如props有一个number，子组件收到了number=1，

在收到后，子组件直接改变number的值为5，去做些事情，但还未做时父组件数据更新了，

传过来一个值3，也就是说子组件刚将其变为5,父组件又把它变成了3,可能影响子组件的使用。

说的官方一些，就是父组件的值更新时，子组件中props的值也会发生更新。

3.在组件中直接用v-model绑定父组件传过来的数据是不合理的，如果希望修改父组件传给子组件的值：

(1)在子组件data中创建一个变量获取props中的值，在取改变这个data中的值

(2)子组件使用$emit发出一个事件,让父组件去修改这个值。

一.如果是简单数据类型

传过去的值相当于拷贝的一份副本,修改子组件的内容并不会影响到父组件，但是直接修改会发生

警告,上述已经参阐述过了，同样通过代码来进行验证。

APP.Vue

子组件

view:

 点击子组件修改并没有修改父组件的数据，相当于一个深拷贝，但是任然会有弊端：

 vue不建议这种写法。

为什么会出现警告呢？

假设子组件需要的值是父组件传递的5

子组件还没做任何操作时

父组件将5更新成了3

可能影响到子组件的使用

说的官方一些，就是父组件的值更新时，子组件中props的值也会发生更新。

正确的修改方式：

二..如果是引用数据类型

说明:引用的数据类型传过去的是一个地址

父组件：

子组件：

view图：

解决方法:

子组件

 

解析:利用es6的扩展运算符,拷贝出一个新的地址，使两者不产生联系。

同理对象也是一样的。

父组件代码:

子组件:

view:

 解析: 同样通过扩展运算符来产生一个新的对象，让两者互相不干扰。

三.总结

父传子的过程中

简单的数据类型是可以修改的,但是最好不要直接进行修改,因为会影响到子组件里面的数据。 需要在重新定义个变量并且赋值。

复杂的数据类型, 不能直接进行修改，因为用的是同一个地址。需要重新产生一个新的对象。

可以使用es6的扩展运算符来解决问题。