Vue.js组件通信常用方式

by Tsez

Vue组件

组件（Component）是可复用的 Vue 实例，且带有一个名字。组件与 new Vue 接收相同的选项，例如 data、computed、watch、methods 以及生命周期钩子等。仅有的例外是像 el 这样根实例特有的选项。组件需要的参数可以通过属性传入，通过触发事件传出。组件只能修改自己的数据，不能直接修改其它组件的数据。

Vue组件间通信

父子组件通信Demo

父组件可以使用props向子组件传递数据，子组件可以$emit触发事件，传递给父组件。

注意：

  1. HTML 中的特性名是大小写不敏感的，所以浏览器会把所有大写字符解释为小写字符。这意味着当你使用 DOM 中的模板时，camelCase (驼峰命名法) 的 prop 名需要使用其等价的 kebab-case (短横线分隔命名) 命名。例如在JS中为postTitle时在HTML中需要修改名称为post-title.
  2. 组件的 data 选项必须是一个函数，如果 Vue 没有这条规则，组件之间可能会互相影响。

多层级父子组件通信Demo

$emit并不能直接像事件冒泡一样，被爷爷组件监听到。因此爷孙间通信需要使用两次父子间通信。

兄弟组件之间通信

可以使用观察者模式，官方的给出的最简单的升级建议是使用集中的事件处理器,而且也明确说明了 一个空的vue实例就可以做到,因为Vue 实例实现了一个事件分发接口.

可以通过创建一个空的Vue实例作为中央事件总线。

var bus = new Vue()

Vue.prototype.$bus=bus

// 触发组件 A 中的事件
this.$bus.$emit('songsting', data)

// 在组件 B 创建的钩子中监听事件
this.$bus.$on('songsting', (data)=>{    
})

对于夸层级的组件（不是父子组件而是爷孙组件）通信，$emit并不能直接像事件冒泡一样，被爷爷组件监听到，也可以建立一个空的Vue实例作为中央事件总线，来进行通信。

// 将在各处使用该事件中心
// 组件通过它来通信
var eventHub = new Vue()

// Son 孙子组件
// ...
methods: {
  addTodo: function () {
    eventHub.$emit('add-todo', { text: this.newTodoText })
    this.newTodoText = ''
  }
}

// 爷爷组件
created: function () {
  eventHub.$on('add-todo', this.addTodo)
  eventHub.$on('delete-todo', this.deleteTodo)
},

Vuex

Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。