vue 父子组件间通信

前言

在vue项目中，封装组件，涉及到父子组件的传值，本文主要讲解父子组件之间传值的方法。

一、props / $emit

适用于父子组件通信，单向数据流，这种方法是 vue 组件的基础。

二、ref 与 $parent / $children

适用于父子组件通信。

ref 如果在普通的 DOM 元素上使用，引用指向的就是 DOM 元素；如果在子组件上，引用就指向组件实例。

$parent / $children 访问父 / 子实例

三、EventBus ($emit / $on)

适用于父子、隔代、兄弟组件通信。

这种方法通过一个空的 Vue 实例作为中央事件总线（事件中心），用它来触发事件和监听事件，从而实现任何组件间的通信。

四、$attrs / $listeners

适用于隔代组件通信。

$attrs：包含了父作用域中不被 props 所识别（且获取）的特性绑定（class 和 style 除外）。当一个组件没有声明任何 props 时，这里会包含所有父作用域的绑定（class 和 style 除外），并且可以通过 v-bind="attrs" 传入内部组件。

$listeners：包含了父作用域中的（不含 .native 修饰器的） v-on 事件监听器，它可以通过 v-on="listeners" 传入内部组件。

五、provide / inject

适用于隔代组件通信。

祖先组件中通过 provide 来提供变量，然后在子孙组件中通过 inject 来注入变量。

provide / inject API 主要解决了跨级组件间的通信问题。

provide 和 inject 主要为高阶插件/组件库提供用例。并不推荐直接用于应用程序代码中。 -- vue文档

正如文档所说， provide 和 inject 用来开发组件库很有用，因为一般开发组件库不会引类似于 Vuex 这样的三方依赖，就只有用 Vue 本身提供的 provide 和 inject 了。

// A.vue
export default {
  provide: {
    name: 'lin'
  }
}

// B.vue
export default {
  inject: ['name'],
  mounted () {
    console.log(this.name);  // lin
  }
}

六、Vuex

适用于父子、隔代、兄弟组件通信。

Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。每一个 Vuex 应用的核心就是 store （仓库）。

store 基本上就是一个容器，它包含着你的应用中大部分的状态 (state) 。

Vuex 的状态存储是响应式的。当 Vue 组件从 store 中读取状态的时候，若 store 中的状态发生变化，那么相应的组件也会相应地得到高效更新。改变 store 中的状态的唯一途径就是显式地提交（commit）mutation。这样使得我们可以方便地追踪每一个状态的变化。