一、子元件與父元件通訊

這部分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()

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

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