组件通信的方式

---

---

一、父传子

在父组件中给子组件标签上绑定一个属性(属性=属性值)， 属性上挂载需要传递的值
在子组件通过props:[“自定义属性名”]来接收数据

props 接收数据的方式有两种：数组形式和对象形式

---

二、子传父

(1)在父组件中给子组件标签绑定一个自定义事件，给这个事件挂载需要调用的方法
(2)在子组件的方法通过this.$emit(‘自定义事件名’,“要传递给父组件的数据”)来调用

---

三、兄弟组件之间传值

(1). 创建一个空的vue实例eventBUS,将其挂载到vue原型上
Vue.prototype.$bus = new Vue()
(2)通过this.$bus.$emit(‘事件名’,‘要传递出的数据’)传到空的vue实例中
(3)通过this.$bus.$on(‘事件名’,(参数)=>{挂载从兄弟组件传来的数据})来接收

注意： 一定要用箭头函数 来让this 指向外面的组件实例

---

1. 父传子

2. 子传父

3. 兄弟组件传值

4. 利用 vuex 进行组件通信 把公共的数据存在 vuex 里 就可以实现组件之间都能使用这个数据了

5. v-model 也能实现组件通信 因为 v-model 就是 :value 和 @input 事件的合写
   如果在一个子组件上使用 v-model 也能实现父子组件之间的通信

6. $attr+$listener
   如果父组件 A 下面有子组件 B 子组件 B 下面又有子组件 C
   如果 a 组件的变量和方法想要传给组件 C 的时候 就用到这个方法 适用于多级组件传值
   在 B 组件中给 C 组件绑定 v-bind=“$attrs"v-on="$listeners” 然后在 C 组件中就可以直接使用 a 传来的属性和方法了
   （简单来说：$attrs与$listeners 是两个对象，
   $attrs 里存放的是父组件中绑定的非 Props 属性，
   $listeners 里存放的是父组件中绑定的非原生事件。）

7. provide 和 inject
   父组件通过通过 provide 提供变量 子组件中通过 inject 注入变量，不论嵌套了几层子组件 都能通过 inject 来调用 provide 的数据

这种写法传的数据是不响应的

8. $parent和$children
   在子组件内可以直接通过$parent对父组件进行操作，在父组件内可以直接通过$children 对子组件进行操作
   在父组件调用子组件时候要加下标也就是$children 是一个数组 因为可以有很多个子组件

9. 也能用本地存储 来 完成组件通信

10. .sync

11. refs 可以获取子组件的方法和属性

12. $root 可以访问根组件的属性和方法