Vue父子组件间单向数据流的解决办法(荐)

话不多说。

在Vue中如果子组件需要改变传过来的数据供自己使用，或者想在子组件中改变传过来的数据并同步到父组件，那么直接改肯定是不行的，如果你这么做了，Vue 会在控制台给出警告warning！！！！！！！！

==========>>首先我们先创建项目，并且运行。

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

----------->>那么对于这两种情况呢：有这么两种解决方案。

 

FIRST：子组件需要改变传过来的数据供自己使用

    1. 定义一个局部变量，并用 props 的值来初始化它

--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------

                    在 App.vue 中

--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------

                    在 Hello.vue 中

--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------

                                       效果图：

--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------

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

--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------

                在 Hello.vue 中改动：

--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------

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

--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------

 

SECOND：子组件中改变传过来的数据并同步到父组件

      1. 使用sync修饰符，它会被扩展为一个自动更新父组件属性的 v-on 监听器

--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------

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

--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------

                    在 Hello.vue 中更改为：

--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------

                            效果为：

--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------

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

--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------

                在 App.vue 中：

--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------

                在 Hello.vue 中：

--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------

                    效果如下：

--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------

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