Vue2.0 Props 雙向通訊問題
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風格的開關按鈕,需求就只有兩個:
- 點選按鈕實現 開/關 狀態切換
- 不點選按鈕,也可以通過外部修改資料切換開關狀態,比如級聯聯動開關。

程式碼大致是類似這樣的:
<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。
- 元件內部需要修改props。
- 元件需要可以由外部在執行時動態控制,而非單純初始化。
- 元件外部需要讀取元件內的狀態來進行處理
滿足上述條件的有比如本例中的switch開關元件,需要外部控制開關狀態;再比如Tab多標籤頁元件的activeIndex屬性,需要可以由外部控制標籤頁當前開啟哪一頁等等
自動化的props雙向繫結處理
Vue的mixin元件——propsync
通過上例也可以看出在Vue2.0中實現props的雙向繫結很麻煩,如果有兩個props需要做雙向繫結上面的程式碼就要實現兩遍,程式碼極其冗餘。
所以我寫了一個mixin來自動化處理props的雙向繫結的需求——propsync
。
主要功能
- 實現了在元件內自動建立所有prop對應的data屬性,方便元件內修改prop使用。解決了vue2.0中不允許元件內直接修改prop的設計。
- 實現了元件外修改元件prop,元件內自動同步修改到data屬性。
- 實現了元件內修改了data屬性(由prop建立的),自動向元件外發出事件通知有內部prop修改。由元件外決定是否要將修改同步到元件外
propsync的使用方法
編寫元件
- 對於編寫元件時,如果需要props雙向繫結,則直接引入mixin,並在配置中宣告mixin即可:
mixins: [propsync]
- 此mixin會根據prop的名稱生成對應的data屬性名,預設為在prop屬性名前面增加"p_",即若prop中有欄位名為
active
,則自動生成名為p_active
的data欄位(props到data的名稱變更方法可自行修改,詳見propsync原始碼開頭配置) - 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
}
}
}
呼叫元件
- 引入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);
}
}
}