vue.js中有關元件資料流問題的解決方案

本篇文章主要介紹了關於vue.js元件資料流的問題，小編覺得挺不錯的，現在分享給大家，也給大家做個參考。一起跟著小編過來看看吧

一、元件

#元件，可以說是現代前端框架中不可或缺的組成部分。使用元件，不僅能大幅提高程式碼的複用率和開發者的開發效率，對於程式碼後期的維護也有著非常重要的意義。前端開發，由於歷史遺留原因，WebComponent 雖然好用，但其發展情況卻受到極大限制，和許多新興的前端技術一樣，可望而不可即。基於這樣的情況，聰明的開發者們嘗試透過框架內部整合相應的功能來完成組件化，各種現代前端框架基本上都有各自的實現。這裡我們來分析一下 vue 的元件，重點放在資料的流向。

二、vue 元件

vue 的元件，在建立模板的時候是基於普通的html 的，不需要學習jsx、handlebars 等的特殊文法，所以相對來說，學習成本比較低，也更容易上手。使用 vue 元件的時候，一般分為元件註冊和元件呼叫兩個部分。

（一）元件註冊

Vue.component('pop-box', {
  template:  &#39;<p class="component-box">\
    <p class="component-content">\
    ..........
    </p>\
  </p>&#39;,

  props: [...],

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

  methods: {
    ...
  },

  mounted () {
    ...
  },

  ...
});

利用Vue.component 方法我們可以很輕鬆的建立一個全域可用的元件，當然也可以在實例或元件內部註冊局部元件，但原理大同小異。 Vue.component 的第一個參數是組件的名字，或者說唯一標識符（id），後續調用它將通過這個名字進行調用；第二個參數是一個對象，通常它包含了模板（template）、組件內維護的資料（data、computed）、方法（methods）、鉤子函數（created 、 mounted...）等關鍵資訊。

值得注意的是：

1. 元件內的data 必須是一個函數，它的傳回值將作為實際的「data」；

2. vue1.x 和vue2.x 的鉤子函數略有不同，如果發現鉤子函數不生效，記得確認vue 的版本。

（二）元件呼叫

（1）開始標籤+ 結束標籤模式

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

（2）無結束標籤模式

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

呼叫vue 元件有上述兩種模式。在兩種模式上，如果沒有使用 slot 那麼實際上並沒有任何區別，但如果需要使用 slot 的時候，便只能使用同時包含開始標籤和結束標籤的模式。

值得注意的是，上面綁定資料的時候，直接採用 property="value" 的形式，不管 value 是數字還是字串，property 最終都是字串型別。如果您想要變成數字類型，請使用 v-bind:property="value" 的形式，或簡寫為 :property="value" 。

三、vue 元件資料流

vue 遵循了典型的單向資料流的原則，即資料總是由父元件傳遞到子元件，子元件在其內部可以有自己維護的數據，但它無權修改父元件傳遞給它的數據，當開發者嘗試這樣做的時候，vue 將會報錯。這樣做的好處是，防止多個子元件都嘗試修改父元件狀態時，讓這行為變得難以追溯。 vue 中具體實作方式如下：

父元件透過綁定props 的方式，將資料傳遞給子元件，但是子元件本身並沒有權利修改這些數據，如果要修改，只能把修改這一個行為透過event 的方式報告給父元件，由父元件本身決定改如何處理資料。

（一）簡單實例

<p id="app">
  <my-counter @inc="increase" :counter="counter"></my-counter>
</p>
...
Vue.component(&#39;my-counter&#39;, {
  template:  &#39;<p class="counter">\
    <p>{{counter}}</p>\
    <button @click="inc">increase</button>\
  </p>&#39;,

  props: [&#39;counter&#39;],

  methods: {
    inc: function () {
      this.$emit(&#39;inc&#39;);
    }
  }
});

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

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

（二）分析資料流向分析

#

（1）我們在父元件中定義了一個資料叫counter；
（2）呼叫元件的時候，透過:counter="counter" 的方式，將父元件的counter 以prop 的方式傳遞到子元件中；
（3）子元件讀取到counter，並將其展示在範本中；
（4）使用者點擊按鈕，counter 需要增加；
（5）子元件監聽到這個事件，但它不是直接修改counter，而是透過this.$emit('inc'); 以自訂事件的形式，將需要增加的這一個事件報告給父元件；
（6）父元件中，由於透過執行過@inc="increase" ，能夠監聽到子元件報告過來的事件，並在自己的increase 方法中，實現counter 的增加；
（7）父元件裡的資料更新了，子元件裡的資料也將自動更新，同時也將更新介面內容，這個過程由框架自動完成。

（三）總結

上面這一個範例，基本上完整展示了vue 主要的資料流向，但是這種基於prop/evnet 的方式僅適用於存在直接的父子關係的元件，兄弟元件或大量元件的資料流向如果再基於這種方式將會變得非常麻煩，這時可以考慮使用更強大的狀態管理模式。

以上是vue.js中有關元件資料流問題的解決方案的詳細內容。更多資訊請關注PHP中文網其他相關文章！