Vue學習筆記-3 前言

Vue 2.x相比較Vue 1.x而言，升級變化除了實現了Virtual-Dom以外，給使用者最大不適就是移除的元件的props的雙向繫結功能。
以往在Vue1.x中利用props的twoWay和.sync繫結修飾符就可以實現props的雙向繫結功能，但是在Vue2中徹底廢棄了此功能，如果需要雙向繫結需要自己來實現。

Vue2的元件props通訊方式

在Vue2中元件的props的資料流動改為了只能單向流動，即只能由元件外（呼叫元件方）通過元件的DOM屬性attribute傳遞props給元件內，元件內只能被動接收元件外傳遞過來的資料，並且在元件內，不能修改由外層傳來的props資料。



關於這一點的修改官方給的解釋：

prop 是單向繫結的：當父元件的屬性變化時，將傳導給子元件，但是不會反過來。這是為了防止子元件無意修改了父元件的狀態——這會讓應用的資料流難以理解。

雖然廢棄了props的雙向繫結對於整個專案整體而言是有利且正確的，但是在某些時候我們確實需要從元件內部修改props的需求

案例

假設我要做一個iOS風格的開關按鈕，需求就只有兩個：

1. 點選按鈕實現 開/關 狀態切換
2. 不點選按鈕，也可以通過外部修改資料切換開關狀態，比如級聯聯動開關。



程式碼大致是類似這樣的：

<div id="app">
   <!--開關元件-->
   <switchbtn :result="result"></switchbtn>
   <!--外部控制-->
   <input type="button" value="change" @click="change">
</div>
 

//開關元件程式碼
Vue.component("switchbtn",{
    template:"<div @click='change'>{{result?'開':'關'}}</div>",
    props:["result"],
    methods:{
        change(){
            this.result=!this.result;
        }
    }
});

//呼叫元件
new Vue({
    el: "#app",
    data:{
        result:true//開關狀態資料
    },
    methods:{
        change(){
            this.result=!this.result;
        }
    }
});
 

但是在vue2.0中上面的程式碼在點選開關時會報錯：

[Vue warn]: Avoid mutating a prop directly since the value will be overwritten whenever the parent component re-renders. Instead, use a data or computed property based on the prop's value. Prop being mutated: "result" (found in component )

元件內不能修改props的值，同時修改的值也不會同步到元件外層，即呼叫元件方不知道元件內部當前的狀態是什麼

在Vue2.0中，實現元件屬性的雙向繫結方式

1. 在元件內的data物件中建立一個props屬性的副本

因為result不可寫，所以需要在data中建立一個副本myResult變數，初始值為props屬性result的值，同時在元件內所有需要呼叫props的地方呼叫這個data物件myResult。

Vue.component("switchbtn", {
    template: "<div @click='change'>{{myResult?'開':'關'}}</div>",
    props: ["result"],
    data: function () {
        return {
            myResult: this.result//data中新增欄位
        };
    },
    ......
});

2. 建立針對props屬性的watch來同步元件外對props的修改

此時在元件外（父元件）修改了元件的props，會同步到元件內對應的props上，但是不會同步到你剛剛在data物件中建立的那個副本上，所以需要再建立一個針對props屬性result的watch（監聽），當props修改後對應data中的副本myResult也要同步資料。

Vue.component("switchbtn", {
    template: "<div @click='change'>{{myResult?'開':'關'}}</div>",
    props: ["result"],
    data: function () {
        return {
            myResult: this.result
        };
    },
    watch: {
        result(val) {
            this.myResult = val;//新增result的watch，監聽變更並同步到myResult上
        }
    },
    ......

3. 建立針對props副本的watch，通知到元件外

此時在元件內修改了props的副本myResult，元件外不知道元件內的props狀態，所以需要再建立一個針對props副本myResult，即對應data屬性的watch。
在元件內向外層（父元件）傳送通知，通知元件內屬性變更，然後由外層（父元件）自己來變更他的資料

最終全部程式碼：

<div id="app">
   <switchbtn :result="result" @on-result-change="onResultChange"></switchbtn>
   <input type="button" value="change" @click="change">
</div>

Vue.component("switchbtn", {
    template: "<div @click='change'>{{myResult?'開':'關'}}</div>",
    props: ["result"],
    data: function () {
        return {
            myResult: this.result//①建立props屬性result的副本--myResult
        };
    },
    watch: {
        result(val) {
            this.myResult = val;//②監聽外部對props屬性result的變更，並同步到元件內的data屬性myResult中
        },
        myResult(val){
            //xxcanghai 小小滄海 部落格園
            this.$emit("on-result-change",val);//③元件內對myResult變更後向外部發送事件通知
        }
    },
    methods: {
        change() {
            this.myResult = !this.myResult;
        }
    }
});

new Vue({
    el: "#app",
    data: {
        result: true
    },
    methods: {
        change() {
            this.result = !this.result;
        },
        onResultChange(val){
            this.result=val;//④外層呼叫元件方註冊變更方法，將元件內的資料變更，同步到元件外的資料狀態中
        }
    }
});

至此，實現了元件內資料與元件外的資料的雙向繫結，元件內外資料的同步。最後歸結為一句話就是：元件內部自己變了告訴外部，外部決定要不要變。



4. 什麼樣的props適合做雙向繫結？

首先要宣告的是雙向繫結的props肯定是不利於元件間的資料狀態管理，尤其是在複雜的業務中更是如此，所以要儘可能的少用雙向繫結，過於複雜的資料處理建議使用Vuex （http://vuex.vuejs.org/zh-cn/intro.html）

但是在我們平時使用過程中又確實有props雙向繫結的需求，個人認為只有在滿足以下條件時再使用雙向繫結的props。

1. 元件內部需要修改props。
2. 元件需要可以由外部在執行時動態控制，而非單純初始化。
3. 元件外部需要讀取元件內的狀態來進行處理

滿足上述條件的有比如本例中的switch開關元件，需要外部控制開關狀態；再比如Tab多標籤頁元件的activeIndex屬性，需要可以由外部控制標籤頁當前開啟哪一頁等等

自動化的props雙向繫結處理

Vue的mixin元件——propsync

通過上例也可以看出在Vue2.0中實現props的雙向繫結很麻煩，如果有兩個props需要做雙向繫結上面的程式碼就要實現兩遍，程式碼極其冗餘。
所以我寫了一個mixin來自動化處理props的雙向繫結的需求——propsync。

主要功能

1. 實現了在元件內自動建立所有prop對應的data屬性，方便元件內修改prop使用。解決了vue2.0中不允許元件內直接修改prop的設計。
2. 實現了元件外修改元件prop，元件內自動同步修改到data屬性。
3. 實現了元件內修改了data屬性（由prop建立的），自動向元件外發出事件通知有內部prop修改。由元件外決定是否要將修改同步到元件外

propsync的使用方法

編寫元件

1. 對於編寫元件時，如果需要props雙向繫結，則直接引入mixin，並在配置中宣告mixin即可： mixins: [propsync]
2. 此mixin會根據prop的名稱生成對應的data屬性名，預設為在prop屬性名前面增加"p_"，即若prop中有欄位名為active，則自動生成名為p_active的data欄位（props到data的名稱變更方法可自行修改，詳見propsync原始碼開頭配置）
3. propsync預設會將所有props建立雙向繫結，可通過propsync:false來宣告此props不需要建立雙向繫結。

例：

import propsync from './mixins/propsync';//引入mixin檔案
export default {
  name: "tab",
  mixins: [propsync],//宣告使用propsync的mixin
  props: {
    active: {
      type: [String, Number],//會被propsync自動實現雙向繫結，在data中建立p_active變數
    },
    width: {
      type: [Number, String],
      propsync:false//不會被propsync實現雙向繫結
    }
  },
  methods: {
    setActive(page, index, e) {
      this.p_active = index;//可以直接使用this.p_active
    }
  }
}

呼叫元件

1. 引入propsync後，會在內部雙向繫結的data變更後觸發一個onPropsChange事件。遂在呼叫元件處，增加一個事件監聽 onPropsChange（可修改），當元件內修改了props時propsync會觸發此事件，返回參與依次為：修改prop名稱，修改後值，修改前值。可以由當前元件呼叫方（父元件）來決定是否要將元件內的變更同步到呼叫方

例：

<tab :active="active" @onPropsChange="change"></tab>
  
......略
{
  data:{
   active:0
  },
  methods:{
   change:function(propName,newVal,oldVal){
     this[propName]=newVal;
     console.log("元件tab的" +propName+ "屬性變更為" +newVal);
   } 
  }
}

原始碼下載

相關筆記