Vue通信（ref、provide/injec、$parent/$children）

文章目录

Vue通信（ref、provide/injec、\$parent/\$children）前言一、ref属性进行通信二、$parent 和 $children三、provide/inject通信总结

---

前言

上次讲解了Vue常用的三种通信方式（props通信、事件进行通信、中央事件总线），今天再补充一下Vue其他的通信方式

---

提示：以下是本篇文章正文内容，下面案例可供参考

一、ref属性进行通信

ref通常是用来获取元素的，但同样也可以用来获取组件

代码如下（示例）：

// 将ref属性绑定在组件上 <father-component> <child-component ref="child"></child-component> </father-component>

这样我们在父组件中就可以获取到子组件，并进行相应操作

this.$refs['child'] / this.$refs.child // 可以获取到child这个组件

【注】不推荐使用该方法进行通信            子组件往往在多个位置进行复用，通过ref获取到子组件后进行修改，会导致所有子组件都发生改变

二、$parent 和 $children

在子组件中 this.$parent 可以直接得到父组件 在父组件中 this.$children[下标] 直接得到子组件

【注】同样不推荐使用，理由同上

三、provide/inject通信

在父组件中新添provide选项，负责存放向子组件传递的数据

let Home={ provide:{ demo:值 } }

在子组件中新添inject属性，负责接收父组件向子组件传递的数据

let Child={ inject:['demo'] // 数组内的值，存放的是接收数据的键 }

---

总结

上述方法一般不推荐使用