Vue 总结：组件间的通讯方式（父子传参、兄弟传参、任意两个组件间传参、多个组件嵌套传参）

Vue 总结：组件间的通讯方式（父子传参、兄弟传参、任意两个组件间传参、多个组件嵌套传参）

---

Vue的通讯的方式:

1. props、emit(最常用的父子通讯方式)

父组件传入属性，子组件通过props接收，就可以在内部this.XXX的方式使用
子组件$emit(事件名，传递的参数)向外弹出一个自定义事件, 在父组件中的属性监听事件，同时也能获取子组件传出来的参数

//	父组件
<hello-world msg="hello world!" @confirm="handleConfirm"><hello-world>
//	子组件
 props: {
    msg: {
      type: String,
      default: ''
    }
  }，
  methods：{
  	handleEmitParent(){
  		this.$emit('confirm', list)
  	}
  }

---

2. 事件总线 EventBus (常用任意两个组件之间通讯)

原理：注册的事件存起来，等触发事件时再调用。定义一个类去处理事件，并挂载到Vue实例的this上即可注册和触发事件，也可拓展一些事件管理

class Bus {
  constructor () {
    this.callbackList = {}
  }

  $on (name, callback) {
    // 注册事件
    this.callbackList[name] ? this.callbackList[name].push(callback) : (this.callbackList[name] = [callback])
  }

  $emit (name, args) {
    // 触发事件
    if (this.callbackList[name]) {
      this.callbackList[name].forEach(cb => cb(args))
    }
  }
}

Vue.prototype.$bus = new Bus()

// 任意两个组件中
// 组件一：在组件的 mounted() 去注册事件
this.$bus.$on('confirm', handleConfirm)

// 组件二：触发事件(如：点击事件后执行触发事件即可)
this.$bus.$emit('confirm', list)

---

3. Vuex 状态管理（vue的核心插件、用于任意组件的任意通讯，需注意刷新后有可能vuex数据会丢失）

创建全局唯一的状态管理仓库（store），有同步（mutations）、异步（actions）的方式去管理数据，有缓存数据（getters），还能分成各个模块（modules）易于维护，详细可访问下方Vuex文档学习

https://vuex.vuejs.org/zh/

4. $parent / $root / $children （不推荐使用，不易于后期维护，一旦页面层次发生变化，就需要重新考虑层级关系）

以父组件为桥梁去注册事件和触发事件来实现的兄弟组件通讯

// 子组件一：
this.$patent.$on('confirm', handleConfirm)
// 子组件二：
this.$patent.$emit('confirm', list)

获取第一个子组件的数据和调用根组件的方法

// 获取第一个子组件的数据
console.log(this.$children[0].msg)

// 调用根组件的方法
this.$root.handleRoot()

---

5. $ref （引用的方式获取子节点）

常用于父组件调用子组件的方法（如：列表数据变化通知子组件重新渲染列表等）
Vue提供了 $refs 来存储当前所有设置了 ref 属性的组件
PS：因为需要渲染完才能获取到 ref 属性，所以建议在mounted后去调用，否则有可能会获取不到
PS：如果定义了两个相同名字的ref则会 this. $refs.XXX将会是一个数组

// 在template中
// ...
<hello-world ref="hello"></hello-world>
// ...
export default {
  mounted(){
    // 调用引用的子组件的方法
    this.$refs.hello.handleRef()
  }
}

---

6. $attrs / $listeners（常用于对原生组件的封装）

$attrs 可以获取父组件传进来但没有通过props接收的属性

// 父组件
<Child :title="title" :desc="desc" >/>

//  子组件内
<template>
<div>
  <h2>{{title}}</h2>
  <p>{{$attrs.desc}}</p>
</div>
</template>	
<script>
export default {
  props: ['title']
  // ...
}
<script>

---

$listeners 会展开父组件的所有监听的事件（click事件等）常用于更高层级的封装
举个例子（需求）：一个页面中有两个组件的点击事件触发方法是一样的"

//  父组件
<div>
  <child-first @click="handleClick"></child-first>
  <child-second @click="handleClick"></child-second>
</div>
export default {
  methods: {
    handleClick: (){
      alert('hello')
    }
  }
}

// child-first
<div v-on="$listeners"></div>

// child-second
<div v-on="$listeners"></div>

---

7. provide / inject （祖先及其后代传值）

常用一些多个组件嵌套封装，一个顶层组件内部的后代组件需要用到顶层组件的数据就使用这种方式

//  顶层组件
export default {
  provide(){
    return {
      msg: 'hello world!'
    }
  }
}

//  后代组件
export default {
  inject: ['msg']
}

---