vue2组件传值的方法

• 父子组件通信: props/$emit; ref/$refs；$attrs / $listeners；$parent / $children
• 兄弟组件通信: eventBus；vuex
• 跨级通信: eventBus；Vuex；$attrs / $listeners

一、props/$emit（父子组件通信）

1.父组件向子组件传值

通过 props 传值。
父组件的代码:

子组件的代码(即 child.vue)：

2.子组件向父组件传值

$emit绑定一个自定义事件, 当这个语句被执行时, 就会将参数arg 传递给父组件,父组件通过v-on 监听并接收参数。
父组件的代码：

子组件的代码(即 child.vue)：

二、ref/$refs（父子组件通信）

ref如果在普通的 DOM 元素上使用，引用指向的就是 DOM 元素；如果用在子组件上，引用就指向组件实例，可以通过实例直接调用组件的方法或访问数据。也算是子组件向父组件传值的一种。

• vue访问子组件实例或子元素
  父组件 parent.vue：

子组件 child.vue：

三、eventBus（兄弟组件通信、跨级通信）

eventBus 又称为事件总线，在 vue 中可以使用它来作为沟通桥梁的概念, 就像是所有组件共用相同的事件中心，可以向该中心注册发送事件或接收事件， 所以组件都可以通知其他组件。一般用来兄弟组件和隔代组件传值。
1.首先需要创建一个事件总线并将其导出, 以便其他模块可以使用或者监听它。
bus.js:

import Vue from 'vue'
export const bus = new Vue()

2.发送事件，假设有 child1、child2 两个兄弟组件，在 child1.vue 中使用bus.$emit()发送事件。
parent.vue:

child1.vue:

3.在 child2.vue 中使用bus.$on()接收事件。

4.如果想移除事件的监听, 可以像下面这样操作：

import { bus } from './bus.js'
bus.$off('addition', {})

四、Vuex（兄弟组件通信、跨级通信）

父组件：

子组件childA：

子组件 childB：

vuex的store.js

import Vue from 'vue'
 import Vuex from 'vuex'
 Vue.use(Vuex)
 const state = {
   // 初始化A和B组件的数据，等待获取
   AMsg: '',
   BMsg: ''
 } 
 const mutations = {
   receiveAMsg(state, payload) {
     // 将A组件的数据存放于state
     state.AMsg = payload.AMsg
   },
   receiveBMsg(state, payload) {
     // 将B组件的数据存放于state
     state.BMsg = payload.BMsg
   }
 }
 
 export default new Vuex.Store({
   state,
   mutations
 })

然后需要在 main.js 中引入 vuex

import Vue from 'vue'
import App from './App'
import router from './router'
import store from './store';

Vue.config.productionTip = false

new Vue({
  el: '#app',
  router,
  store,
  components: { App },
  template: ''
})

五、$attrs/$listeners（父子组件通信、跨级通信）

parent.vue：

childA.vue:

childB.vue:

六、$children/$parent（父子组件通信）

parent.vue：

child.vue：

要注意边界情况，如在 #app 上拿 $parent的是 new Vue() 的实例，在这实例上再拿 $parent得到的是 undefined，而在最底层的子组件拿 $children是个空数组。也要注意得到 $parent 和 $children 的值不一样，$children的值是数组，而 $parent 是个对象。