话不多说。
在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 中:
--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
效果如下:
--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
!!! 我们是不允许直接修改父组件传过来的数据或对象的,而这种方法更改的是对象中的属性,因为对象是引用类型,指向同一内存空间,所以可以实现此效果。推荐使用该方式