一、組件

組件，可以說是現(xiàn)代前端框架中必不可少的組成部分。使用組件，不僅能極大地提高代碼的復(fù)用率和開發(fā)者的開發(fā)效率，對于代碼后期的維護也有著非常重要的意義。前端開發(fā)，由于歷史遺留原因，WebComponent 雖然好用，但其發(fā)展情況卻受到極大地限制，和很多新興的前端技術(shù)一樣，可望而不可即?；谶@樣的情況，聰明的開發(fā)者們嘗試通過框架內(nèi)部集成相應(yīng)的功能來完成組件化，各種現(xiàn)代前端框架基本上都有各自的實現(xiàn)。這里我們來分析一下 vue 的組件，重點關(guān)注數(shù)據(jù)的流向。

二、vue 組件

vue 的組件，創(chuàng)建模板的時候是基于普通的 html 的，不需要學(xué)習(xí) jsx、handlebars 等的特殊語法，所以相對來說，學(xué)習(xí)成本比較低，更容易上手。使用 vue 組件的時候，一般分為組件注冊和組件調(diào)用兩個部分。

（一）組件注冊

Vue.component('pop-box', {
  template:  '<div class="component-box">\
    <div class="component-content">\
    ..........
    </div>\
  </div>',

  props: [...],

  data: function () {
    return ...;
  },

  methods: {
    ...
  },

  mounted () {
    ...
  },

  ...
});

利用 Vue.component 方法我們可以很輕松的創(chuàng)建一個全局可用的組件，當然也可以在實例或組件內(nèi)部注冊局部組件，但原理大同小異。Vue.component 的第一個參數(shù)是組件的名字，或者說唯一標識符（id），后續(xù)調(diào)用它將通過這個名字進行調(diào)用；第二個參數(shù)是一個對象，通常它包含了模板（template）、組件內(nèi)維護的數(shù)據(jù)（data、computed）、方法（methods）、鉤子函數(shù)（created 、 mounted...）等關(guān)鍵信息。

值得注意的是：

1. 組件內(nèi)的 data 必須是一個函數(shù)，它的返回值將作為實際的 “data”；
2. vue1.x 和 vue2.x 的鉤子函數(shù)略有不同，如果發(fā)現(xiàn)鉤子函數(shù)不生效，記得確認 vue 的版本。

（二）組件調(diào)用

（1）開始標簽 + 結(jié)束標簽?zāi)Ｊ?/p>

<pop-box text="200" v-bind:number="200"></pop-box>

（2）無結(jié)束標簽?zāi)Ｊ?/p>

<pop-box text="200" v-bind:number="200" />

調(diào)用 vue 組件有以上兩種模式。兩種模式上，如果沒有使用 slot 那么實際上并沒有任何區(qū)別，但如果需要使用 slot 的時候，便只能使用同時包含開始標簽和結(jié)束標簽的模式。

值得注意的是，上面綁定數(shù)據(jù)的時候，直接采用 property="value" 的形式，不管 value 是數(shù)字還是字符串，property 最終都是字符串類型。如果想讓其變成數(shù)字類型，請使用 v-bind:property="value" 的形式，或者簡寫為 :property="value" 。

三、vue 組件數(shù)據(jù)流

vue 遵循了典型的單向數(shù)據(jù)流的原則，即數(shù)據(jù)總是由父組件傳遞到子組件，子組件在其內(nèi)部可以有自己維護的數(shù)據(jù)，但它無權(quán)修改父組件傳遞給它的數(shù)據(jù)，當開發(fā)者嘗試這樣做的時候，vue 將會報錯。這樣做的好處是，防止多個子組件都嘗試修改父組件狀態(tài)時，讓這一行為變得難以追溯。vue 中具體實現(xiàn)方式如下：

父組件通過綁定 props 的方式，將數(shù)據(jù)傳遞給子組件，但是子組件自己并沒有權(quán)利修改這些數(shù)據(jù)，如果要修改，只能把修改這一個行為通過 event 的方式報告給父組件，由父組件本身決定改如何處理數(shù)據(jù)。

（一）簡單實例

<div id="app">
  <my-counter @inc="increase" :counter="counter"></my-counter>
</div>
...
Vue.component('my-counter', {
  template:  '<div class="counter">\
    <div>{{counter}}</div>\
    <button @click="inc">increase</button>\
  </div>',

  props: ['counter'],

  methods: {
    inc: function () {
      this.$emit('inc');
    }
  }
});

var app = new Vue({
  el: '#app',
  data: {
    counter: 0
  },
  methods: {
    increase () {
      this.counter ++;
    }
  }
});

為了顯得更簡單這里只創(chuàng)建了一個 my-counter 組件作為子組件，我們可以姑且將 vue 的實例認為是一個父組件。

（二）分析數(shù)據(jù)流向分析

（1）我們在父組件中定義了一個數(shù)據(jù)叫 counter；
（2）調(diào)用組件的時候，通過 :counter="counter" 的方式，將父組件的 counter 以 prop 的方式傳遞到子組件中；
（3）子組件讀取到 counter，并將其展示在模板中；
（4）用戶點擊按鈕，counter 需要增加；
（5）子組件監(jiān)聽到這個事件，但它并不直接修改 counter，而是通過 this.$emit('inc'); 以自定義事件的形式，將需要增加的這一個事件報告給父組件；
（6）父組件中，由于通過執(zhí)行過 @inc="increase" ，能夠監(jiān)聽到子組件報告過來的事件，并在自己的 increase 方法中，實現(xiàn) counter 的增加；
（7）父組件里的數(shù)據(jù)更新了，子組件里的數(shù)據(jù)也將自動更新，同時也將更新界面內(nèi)容，這一過程由框架自動完成。

（三）總結(jié)

上面這一個示例，基本完整展示了 vue 主要的數(shù)據(jù)流向，但是這種基于 prop/evnet 的方式僅適用于存在直接的父子關(guān)系的組件，兄弟組件或者大量組件的數(shù)據(jù)流向如果再基于這種方式將會變得非常麻煩，這時可以考慮使用更加強大的狀態(tài)管理模式。

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

最新評論