vue组件通信

一、子组件与父组件通信

这部分vue文档已经说的很清楚了，但是为了更好的理解，自己再整理一遍。

首先，父组件的与子组件的通信是通过子组件的props。

那么子组件有数据变化时，想要通知父组件应该怎么办呢？

父组件可以在使用子组件的地方直接用 v-on 来监听子组件触发的事件。

简单来说，就是子组件监听的事件，在函数内使用 $emit(eventName, optionalPayload) 触发事件，在父组件使用v-on监听emit的触发事件。

代码如下：

<div id="counter-event-example">//父组件
  <p>{{ total }}</p>
  <button-counter v-on:increment="incrementTotal"></button-counter>//子组件
  <button-counter v-on:increment="incrementTotal"></button-counter>//子组件
</div>

Vue.component('button-counter', {
  template: '<button v-on:click="incrementCounter">{{ counter }}</button>',
  data: function () {
    return {
      counter: 0
    }
  },
  methods: {
    incrementCounter: function () {
      this.counter += 1
      this.$emit('increment')//触发事件
    }
  },
})

new Vue({
  el: '#counter-event-example',
  data: {
    total: 0
  },
  methods: {
    incrementTotal: function () {
      this.total += 1
    }
  }
})

二、非父子组件通信

分3步：

1.使用一个空的 Vue 实例作为事件总线

var parent = new Vue({ el: '#parent' })
// 访问子组件实例
var child = parent.$refs.profile

var bus = new Vue()

2.触发组件 A 中的事件

bus.$emit('id-selected', 1)

3.在组件 B 创建的钩子中监听事件

bus.$on('id-selected', function (id) {
  // ...
})

三、js操作组件

在js中直接访问子组件，可以使用 ref 为子组件指定一个引用 ID：

<div id="parent">	
  <user-profile ref="profile"></user-profile>		//ref为子组件指定id
</div>

var parent = new Vue({ el: '#parent' })
// 访问子组件实例
var child = parent.$refs.profile

当 ref 和 v-for 一起使用时，获取到的引用会是一个数组，包含和循环数据源对应的子组件

$refs 只在组件渲染完成后才填充，并且它是非响应式的。它仅仅是一个直接操作子组件的应急方案——应当避免在模板或计算属性中使用 $refs。