Vue躬行記（5）——組件通訊

　　組件之間除了保持獨立以外，還須要相互通訊，本章將介紹幾種通訊的方式。

1、直接訪問

　　Vue提供了三個實例屬性，可直接訪問父組件、子組件和根實例，以下所列。

　　（1）$parent：父組件。

　　（2）$root：根實例，若是沒有父實例，那麼讀取的將是自身。

　　（3）$children：直接子組件，沒法獲取隔代的子組件，而且不保證組件的順序，也非響應式。

　　下面用一個示例來演示它們的用法，首先建立兩個父子關係的組件parent和child；接着初始化根實例vm，掛載的<div>元素包含parent組件；最後爲根實例和parent組件的數據對象添加name屬性。

<div id="container">
  <parent></parent>
</div>
<script>
  Vue.component("child", {
    template: '<p>子組件</p>',
    mounted: function() {
      this.$parent.name;      //"parent"
      this.$root.name;        //"root"
    }
  });
  Vue.component("parent", {
    data: function() {
      return {
        name: "parent"
      };
    },
    template: '<child></child>'
  });
  var vm = new Vue({
    el: "#container",
    data: {
      name: "root"
    }
  });
  vm.$children;            //[VueComponent]
</script>

　　當執行vm.$children時，獲得的是一個子組件數組。在child組件的mounted鉤子中調用了實例的$parent和$root的name屬性，其值分別是「parent」和「root」。

　　大部分狀況下，應當避免直接修改組件的內部，由於這麼作不只讓父子組件緊密耦合，並且還難以追蹤是誰發起的變動。

2、ref和$refs

　　若是要直接訪問子元素或子組件，那麼除了使用上文的$children屬性以外，還能經過ref特性配合$refs屬性實現。

　　DOM元素或組件可經過聲明ref特性來指定一個索引標識符，即註冊引用信息。而父組件的$refs屬性則記錄了聲明過ref特性的子元素和子組件，它的值是一個對象，其鍵就是ref特性的值。下面是一個簡單的例子，註冊了父組件parent和子組件child，而且爲child組件和<input>元素分別聲明瞭ref特性。

Vue.component("child", {
  template: '<input ref="txt" />',
  mounted: function() {
    this.$refs;        //{txt: input}
  }
});
Vue.component("parent", {
  template: '<child ref="child"></child>',
  mounted: function() {
    this.$refs;        //{child: VueComponent}
  }
});

　　在兩個組件的mounted鉤子中，讀取了各自實例的$refs屬性。若是要在parent組件中讀取child組件的$refs屬性，那麼能夠像下面這樣。

this.$refs.child.$refs

　　注意，$refs不是響應式的，而且在渲染到頁面以前是沒法訪問的，即不能在mounted以前的鉤子中使用。

　　當ref特性與v-for指令配合時，引用的將是一個數組，以下所示。

Vue.component("child", {
  data: function() {
    return {
      names: ["strick", "freedom"]
    };
  },
  template: `<div>
      <input v-for="item in names" ref="txt" />
    </div>`,
  mounted: function() {
    this.$refs;     //{txt: [input, input]}
  }
});

3、自定義事件

　　組件支持自定義事件，而且能在子組件中觸發該事件，從而實現組件之間的通訊。假設有兩個父子關係的組件parent和child，在child組件上聲明瞭自定義的dot事件，而在<button>元素上添加了click事件，它們接收的事件處理程序都叫add，以下所示。

Vue.component("child", {
  template: '<button @click="add">提交</button>',
  methods: {
    add: function() {
      this.$emit("dot", 1, 2);
    }
  }
});
Vue.component("parent", {
  template: '<child @dot="add"></child>',
  methods: {
    add: function(left, right) {
      console.log(left, right);        //1 2
    }
  }
});

　　Vue提供的實例方法$emit()，它的第一個參數是要觸發的事件名稱，其他參數都將回傳給該事件的處理程序。在子組件child的add()方法中向$emit()傳遞了三個參數（「dot」、1和2），父組件parent中的add()方法能接收從子組件傳遞過來的兩個數值（1和2）。

　　注意，自定義的事件名稱不要用駝峯的命名方式，由於它沒有等價的連字符分隔式的名稱，例以下面的addNumber和add-number是兩個事件。

<child @addNumber="handle"></child>
<!-- 不一樣 -->
<child @add-number="handle"></child>

　　在DOM模板中，因爲事件名稱會被自動轉換爲小寫，所以像下面這樣調用addNumber事件將會失敗。但在字符串模板中不會受其影響，依然能調用成功。

this.$emit("addNumber");

1）v-model

　　組件也支持v-model指令，但須要作些配置。默認狀況下，組件的v-model只監聽value特性的變化以及input事件。若是要定製，那麼可使用model選項，而且須要在props中添加要監聽的特性。下面註冊一個checkbox組件，並讓它的v-model指令關聯模板內的複選框的checked特性和change事件。

Vue.component("checkbox", {
  model: {
    prop: "checked",
    event: "change"
  },
  props: {
    checked: Boolean
  },
  template: '<input type="checkbox" :checked="checked" @change="dot" />',
  methods: {
    dot: function(e) {
      console.log(e.target.checked);
    }
  }
});

　　在將v-model做用於checkbox組件上後（以下所示），每次點擊渲染出的複選框，就會在控制檯輸出當前的選中狀態。

<div id="container">
  <checkbox v-model="current"></checkbox>
</div>
<script>
  var vm = new Vue({
    el: "#container",
    data: {
      current: true
    }
  });
</script>