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 中:


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

                    效果如下:


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

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

阅读更多
版权声明:By------水稻南曦 https://blog.csdn.net/jsnancy/article/details/80696043
上一篇Vue父子组件间的传值(荐)
下一篇[Vue2.0] vue-cli + webpack 构建项目报错的解决方法(荐)
想对作者说点什么? 我来说一句

没有更多推荐了,返回首页

关闭
关闭
关闭