Vue中父子组件，爷孙组件传值

定义 parent.vue 父组件，向子组件传值

结果如下图

建立grandSon.vue孙子文件,添加provide属性

修改parent组件如下

建立grandSon.vue文件,通过inject接收爷爷传过来的值

子组件 child.vue中引入grandSon.vue，child.vue最终如下

最终效果如下

依赖注入是针对 父级组件与子孙级组件之间的数据传递 数据的传递，或者有很多后代组件的情况，只针对直系后代使用，实现组件之间的数据共享。

需要使用到vue提供的 provide以及inject 方法

其中，provide用来提供传递的数据，inject用来接收数据

子组件的如果也想要使用爷爷组件的数据， *** 作方法是一样的，也是通过inject进行接收并且return，然后直接使用即可。

总结：

1.父传子孙数据：provide

2.子孙得到数据：inject

这里还是使用provide和inject来进行数据的传递，但是这次是通过函数的参数进行传值。

1.导入provide和inject到父组件中

2.通过provide声明函数，并要有形参用来接收孙组件传来的实参

总结：

1.孙子组件传递数据给爷爷组件，需要通过provide一个函数的方式实现

2.爷爷组件传递一个函数，后续通过函数的形参获取数据

孙子组件获取并调用该函数传递数据

1.父子传参：

爹给儿子传递数据，通过 自定义属性 ，给组件props属性，然后绑定在父组件的子组件上

儿子给爹传递数据，通过 自定义事件

2.爷爷孙子传参：

孙子给爷爷传值是 函数 ，通过provide一个函数，在孙子组件inject注入，然后通过参数传递想要传递的值

爷爷给子孙传递 数据 ，通过provide一个变量和值，在孙子组件inject注入，孙子组件通过inject接收数据即可。

3.后代给前辈 传数据都需要 函数传参

4.自定义属性、事件（函数）一般都绑定在父组件中，也就是provide一般出现在父组件，不论是提供给孙组件的数据还是接收孙组件数据的函数

今天思考一个问题，在子组件中，key值的作用是什么？

如果一个组件， <A key="1" />改边key的值， <A key="2" />，发生什么？

实践出真理，测试一下：

首先，创建一个子组件：

一个非常简单的组件，在各个生命周期上，绑定事件：

接下来，通过父组件修改子组件的key值：

看看运行起来是什么情况：

点击按钮之后，发现：

通过patch函数，可以看到，首先需要对比两个节点是否是相同节点，（相同的组件，难道不是相同节点吗？）

进入sameVnode函数看看：

恍然大悟，原来在diff的时候，不仅是对比元素的标签名，还会去对比元素的key值，key值一旦改变，就算子节点的内容一模一样，也是会进入到patch函数的else中，那么这个时候，执行的 *** 作就是新建新组件=>删除旧组件=>添加新组件。

因此，可以看到生命周期是新组件的生命周期先执行，再进行旧组件的销毁，接着挂载新组件。

emmmm...

那么再思考深一层的问题，如果是列表渲染的时候，key值设为id，和index会有什么区别呢？？

同样的做一个测验：创建一个子组件，子组件里包含一个孙子组件

接着，在原先的<key-com/>组件里：

创建2个Child组件，它们的区别就是一个使用index作为key，一个使用id作为key：

运行之后就可以看到它们的区别：

点击删除之后数组是：

先对比id从[1,2,3]变成了[1,3]，即第二项被删除了。

因此： key值为何不能用index作为值？

如果你用index作为key值的时候，在删除第二项时，index就从1，2，3变成1，2；而不是1，3。

VUE是通过比对组件自身新旧vdom进行更新的。key的作用是辅助判断新旧vdom节点在逻辑上是不是同一个对象。

因此可以确定，渲染列表时，key值需要一个唯一确定的id来赋值。

---