Vue學(xué)習(xí)筆記-3 前言

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

Vue2的組件props通信方式

在Vue2中組件的props的數(shù)據(jù)流動(dòng)改為了只能單向流動(dòng)，即只能由組件外（調(diào)用組件方）通過(guò)組件的DOM屬性attribute傳遞props給組件內(nèi)，組件內(nèi)只能被動(dòng)接收組件外傳遞過(guò)來(lái)的數(shù)據(jù)，并且在組件內(nèi)，不能修改由外層傳來(lái)的props數(shù)據(jù)。

關(guān)于這一點(diǎn)的修改官方給的解釋：

prop 是單向綁定的：當(dāng)父組件的屬性變化時(shí)，將傳導(dǎo)給子組件，但是不會(huì)反過(guò)來(lái)。這是為了防止子組件無(wú)意修改了父組件的狀態(tài)——這會(huì)讓應(yīng)用的數(shù)據(jù)流難以理解。

雖然廢棄了props的雙向綁定對(duì)于整個(gè)項(xiàng)目整體而言是有利且正確的，但是在某些時(shí)候我們確實(shí)需要從組件內(nèi)部修改props的需求

案例

假設(shè)我要做一個(gè)iOS風(fēng)格的開(kāi)關(guān)按鈕，需求就只有兩個(gè)：

• 點(diǎn)擊按鈕實(shí)現(xiàn) 開(kāi)/關(guān) 狀態(tài)切換
• 不點(diǎn)擊按鈕，也可以通過(guò)外部修改數(shù)據(jù)切換開(kāi)關(guān)狀態(tài)，比如級(jí)聯(lián)聯(lián)動(dòng)開(kāi)關(guān)。
  

代碼大致是類似這樣的：

<div id="app">
 <!--開(kāi)關(guān)組件-->
 <switchbtn :result="result"></switchbtn>
 <!--外部控制-->
 <input type="button" value="change" @click="change">
</div>

//開(kāi)關(guān)組件代碼
Vue.component("switchbtn",{
 template:"<div @click='change'>{{result?'開(kāi)':'關(guān)'}}</div>",
 props:["result"],
 methods:{
 change(){
 this.result=!this.result;
 }
 }
});

//調(diào)用組件
new Vue({
 el: "#app",
 data:{
 result:true//開(kāi)關(guān)狀態(tài)數(shù)據(jù)
 },
 methods:{
 change(){
 this.result=!this.result;
 }
 }
});

但是在vue2.0中上面的代碼在點(diǎn)擊開(kāi)關(guān)時(shí)會(huì)報(bào)錯(cuò)：

[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 )

組件內(nèi)不能修改props的值，同時(shí)修改的值也不會(huì)同步到組件外層，即調(diào)用組件方不知道組件內(nèi)部當(dāng)前的狀態(tài)是什么

在Vue2.0中，實(shí)現(xiàn)組件屬性的雙向綁定方式

1. 在組件內(nèi)的data對(duì)象中創(chuàng)建一個(gè)props屬性的副本

因?yàn)?span style="color: #3366ff">result不可寫，所以需要在data中創(chuàng)建一個(gè)副本myResult變量，初始值為props屬性result的值，同時(shí)在組件內(nèi)所有需要調(diào)用props的地方調(diào)用這個(gè)data對(duì)象myResult。

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

2. 創(chuàng)建針對(duì)props屬性的watch來(lái)同步組件外對(duì)props的修改

此時(shí)在組件外（父組件）修改了組件的props，會(huì)同步到組件內(nèi)對(duì)應(yīng)的props上，但是不會(huì)同步到你剛剛在data對(duì)象中創(chuàng)建的那個(gè)副本上，所以需要再創(chuàng)建一個(gè)針對(duì)props屬性result的watch（監(jiān)聽(tīng)），當(dāng)props修改后對(duì)應(yīng)data中的副本myResult也要同步數(shù)據(jù)。

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

3. 創(chuàng)建針對(duì)props副本的watch，通知到組件外

此時(shí)在組件內(nèi)修改了props的副本myResult，組件外不知道組件內(nèi)的props狀態(tài)，所以需要再創(chuàng)建一個(gè)針對(duì)props副本myResult，即對(duì)應(yīng)data屬性的watch。
在組件內(nèi)向外層（父組件）發(fā)送通知，通知組件內(nèi)屬性變更，然后由外層（父組件）自己來(lái)變更他的數(shù)據(jù)

最終全部代碼：

<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?'開(kāi)':'關(guān)'}}</div>",
 props: ["result"],
 data: function () {
 return {
 myResult: this.result//①創(chuàng)建props屬性result的副本--myResult
 };
 },
 watch: {
 result(val) {
 this.myResult = val;//②監(jiān)聽(tīng)外部對(duì)props屬性result的變更，并同步到組件內(nèi)的data屬性myResult中
 },
 myResult(val){
 //xxcanghai 小小滄海 博客園
 this.$emit("on-result-change",val);//③組件內(nèi)對(duì)myResult變更后向外部發(fā)送事件通知
 }
 },
 methods: {
 change() {
 this.myResult = !this.myResult;
 }
 }
});

new Vue({
 el: "#app",
 data: {
 result: true
 },
 methods: {
 change() {
 this.result = !this.result;
 },
 onResultChange(val){
 this.result=val;//④外層調(diào)用組件方注冊(cè)變更方法，將組件內(nèi)的數(shù)據(jù)變更，同步到組件外的數(shù)據(jù)狀態(tài)中
 }
 }
});

至此，實(shí)現(xiàn)了組件內(nèi)數(shù)據(jù)與組件外的數(shù)據(jù)的雙向綁定，組件內(nèi)外數(shù)據(jù)的同步。最后歸結(jié)為一句話就是：組件內(nèi)部自己變了告訴外部，外部決定要不要變。

4. 什么樣的props適合做雙向綁定？

首先要聲明的是雙向綁定的props肯定是不利于組件間的數(shù)據(jù)狀態(tài)管理，尤其是在復(fù)雜的業(yè)務(wù)中更是如此，所以要盡可能的少用雙向綁定，過(guò)于復(fù)雜的數(shù)據(jù)處理建議使用Vuex （http://vuex.vuejs.org/zh-cn/intro.html）

但是在我們平時(shí)使用過(guò)程中又確實(shí)有props雙向綁定的需求，個(gè)人認(rèn)為只有在滿足以下條件時(shí)再使用雙向綁定的props。

• 組件內(nèi)部需要修改props。
• 組件需要可以由外部在運(yùn)行時(shí)動(dòng)態(tài)控制，而非單純初始化。
• 組件外部需要讀取組件內(nèi)的狀態(tài)來(lái)進(jìn)行處理
  

滿足上述條件的有比如本例中的switch開(kāi)關(guān)組件，需要外部控制開(kāi)關(guān)狀態(tài)；再比如Tab多標(biāo)簽頁(yè)組件的activeIndex屬性，需要可以由外部控制標(biāo)簽頁(yè)當(dāng)前打開(kāi)哪一頁(yè)等等

自動(dòng)化的props雙向綁定處理

Vue的mixin組件——propsync

通過(guò)上例也可以看出在Vue2.0中實(shí)現(xiàn)props的雙向綁定很麻煩，如果有兩個(gè)props需要做雙向綁定上面的代碼就要實(shí)現(xiàn)兩遍，代碼極其冗余。
所以我寫了一個(gè)mixin來(lái)自動(dòng)化處理props的雙向綁定的需求——propsync。

主要功能

• 實(shí)現(xiàn)了在組件內(nèi)自動(dòng)創(chuàng)建所有prop對(duì)應(yīng)的data屬性，方便組件內(nèi)修改prop使用。解決了vue2.0中不允許組件內(nèi)直接修改prop的設(shè)計(jì)。
• 實(shí)現(xiàn)了組件外修改組件prop，組件內(nèi)自動(dòng)同步修改到data屬性。
• 實(shí)現(xiàn)了組件內(nèi)修改了data屬性（由prop創(chuàng)建的），自動(dòng)向組件外發(fā)出事件通知有內(nèi)部prop修改。由組件外決定是否要將修改同步到組件外

propsync的使用方法

編寫組件

• 對(duì)于編寫組件時(shí)，如果需要props雙向綁定，則直接引入mixin，并在配置中聲明mixin即可： mixins: [propsync]
• 此mixin會(huì)根據(jù)prop的名稱生成對(duì)應(yīng)的data屬性名，默認(rèn)為在prop屬性名前面增加"p_"，即若prop中有字段名為active，則自動(dòng)生成名為p_active的data字段（props到data的名稱變更方法可自行修改，詳見(jiàn)propsync源碼開(kāi)頭配置）
• propsync默認(rèn)會(huì)將所有props創(chuàng)建雙向綁定，可通過(guò)propsync:false來(lái)聲明此props不需要?jiǎng)?chuàng)建雙向綁定。
  

例：

import propsync from './mixins/propsync';//引入mixin文件
export default {
 name: "tab",
 mixins: [propsync],//聲明使用propsync的mixin
 props: {
 active: {
 type: [String, Number],//會(huì)被propsync自動(dòng)實(shí)現(xiàn)雙向綁定，在data中創(chuàng)建p_active變量
 },
 width: {
 type: [Number, String],
 propsync:false//不會(huì)被propsync實(shí)現(xiàn)雙向綁定
 }
 },
 methods: {
 setActive(page, index, e) {
 this.p_active = index;//可以直接使用this.p_active
 }
 }
}

調(diào)用組件

引入propsync后，會(huì)在內(nèi)部雙向綁定的data變更后觸發(fā)一個(gè)onPropsChange事件。遂在調(diào)用組件處，增加一個(gè)事件監(jiān)聽(tīng) onPropsChange（可修改），當(dāng)組件內(nèi)修改了props時(shí)propsync會(huì)觸發(fā)此事件，返回參與依次為：修改prop名稱，修改后值，修改前值?？梢杂僧?dāng)前組件調(diào)用方（父組件）來(lái)決定是否要將組件內(nèi)的變更同步到調(diào)用方
例：

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

源碼下載

Vue的mixin組件propsync已經(jīng)托管至Github：
https://github.com/xxcanghai/cnblogsFiles/blob/master/vue-mixins/propsync.js

相關(guān)筆記

Vue學(xué)習(xí)筆記-1(http://chabaoo.cn/article/98869.htm)

Vue學(xué)習(xí)筆記-2(http://chabaoo.cn/article/98878.htm)

Vue學(xué)習(xí)筆記-3 如何在Vue2中實(shí)現(xiàn)組件props雙向綁定 (http://chabaoo.cn/article/98881.htm)

本文已被整理到了《Vue.js前端組件學(xué)習(xí)教程》，歡迎大家學(xué)習(xí)閱讀。

關(guān)于vue.js組件的教程，請(qǐng)大家點(diǎn)擊專題vue.js組件學(xué)習(xí)教程進(jìn)行學(xué)習(xí)。

更多vue學(xué)習(xí)教程請(qǐng)閱讀專題《vue實(shí)戰(zhàn)教程》

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

最新評(píng)論