Vue组件通信大全

1、父传子

首先在子组件标签上绑定一个自定义属性，然后在子组件里通过props接收这个属性，props接收有两种方式分别是数组和对象形式

父传子的使用场景 封装列表的时候 把数据传到子组件渲染

2、子传父

在子组件的标签上绑定一个自定义事件，然后在子组件里通过$emit调用这个自定义事件，调用这个事件的同时把要传的数据作为参数传到父组件

子传父的使用场景：子组件中有删除等方法的时候要在子组件把下标传到父组件操作数据

3、兄弟组件传值

中央事件总线eventbus在main.js定义一个空的vue实例挂载在原型上起名$bus，通过this.$bus.$emit传数据，在要接受子组件的created钩子函数下通过$on来接收

4、vuex

把公共数据存在vuex里这样也能实现组件通信

5、本地存储

把要传递的数据存在本地存储里 再要接收的组件接收 也能实现组件通信

6、v-model

是一个语法糖 是:value和@input的合写所以说能实现组件通信

7、$attr和$listener

主要是祖孙之间传值 父组件下面有子组件a 子组件a下面又有子组件b，在父组件里还是用自定义属性和自定义事件传，在子组件a下面绑定v-bind="$attrs" v-on="$listeners"在子组件b下面通过$attrs拿数据，通过$emit调用方法

8、provide和inject

不管嵌套了几层都能拿到数据，把数据定义在provide里子组件通过inject拿到数据缺点是不响应

9、chlidren和parent

在子组件里通过$parent拿到父组件的数据和方法

在父组件里通过$children拿到子组件的数据和方法