一、組件

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

二、vue 組件

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

（一）組件注冊(cè)

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)建一個(gè)全局可用的組件，當(dāng)然也可以在實(shí)例或組件內(nèi)部注冊(cè)局部組件，但原理大同小異。Vue.component 的第一個(gè)參數(shù)是組件的名字，或者說(shuō)唯一標(biāo)識(shí)符（id），后續(xù)調(diào)用它將通過(guò)這個(gè)名字進(jìn)行調(diào)用；第二個(gè)參數(shù)是一個(gè)對(duì)象，通常它包含了模板（template）、組件內(nèi)維護(hù)的數(shù)據(jù)（data、computed）、方法（methods）、鉤子函數(shù)（created 、 mounted...）等關(guān)鍵信息。

值得注意的是：

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

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

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

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

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

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

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

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

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

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

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

（一）簡(jiǎn)單實(shí)例

<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 ++;
    }
  }
});

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

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

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

（三）總結(jié)

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

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

最新評(píng)論