Vue2實作元件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=&#39;change&#39;>{{result?&#39;开&#39;:&#39;关&#39;}}</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 warn]: Avue mulwulwion dir​​片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的值的值，同時修改props不會同步到元件外層，也就是呼叫元件方不知道元件內部目前的狀態是什麼

在Vue2.0中，實作元件屬性的雙向綁定方式

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

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

Vue.component("switchbtn", {
 template: "<div @click=&#39;change&#39;>{{myResult?&#39;开&#39;:&#39;关&#39;}}</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=&#39;change&#39;>{{myResult?&#39;开&#39;:&#39;关&#39;}}</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=&#39;change&#39;>{{myResult?&#39;开&#39;:&#39;关&#39;}}</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);
 }
 }
}

更多Vue2實作元件props雙向綁定相关文章请关注PHP中文网！