快捷導(dǎo)航

Vue2.0利用 v-model 實(shí)現(xiàn)組件props雙向綁定的優(yōu)美解決方案

更新時(shí)間：2017年03月13日 14:54:43 作者：tangolivesky

本篇文章主要介紹了Vue2 利用 v-model 實(shí)現(xiàn)組件props雙向綁定的優(yōu)美解決方案，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下。

在項(xiàng)目中開始使用vue2來(lái)構(gòu)建項(xiàng)目了，跟 vue1 很大的一處不同在于2 取消了props 的雙向綁定，改成只能從父級(jí)傳到子級(jí)的單向數(shù)據(jù)流，初衷當(dāng)然是好的，為了避免雙向綁定在項(xiàng)目中容易造成的數(shù)據(jù)混亂。

解決方案一

然后開始參考網(wǎng)上和github上的方案等等，發(fā)現(xiàn)很多解決方案是這樣的

用data對(duì)象中創(chuàng)建一個(gè)props屬性的副本
watch props屬性賦予data副本來(lái)同步組件外對(duì)props的修改
watch data副本，emit一個(gè)函數(shù) 通知到組件外

這里以最常見的 modal為例子：modal挺合適雙向綁定的，外部可以控制組件的顯示或者隱藏，組件內(nèi)部的關(guān)閉可以控制 visible屬性隱藏，同時(shí)visible 屬性同步傳輸?shù)酵獠?/p>

///modal.vue 組件
<template>
 <div class="modal" v-show="visible">
  <div class="close" @click="cancel">X</div>
 </div>
</template>

<script>
export default {
 name:'modal',
 props: {
  value: {
  type: Boolean,
  default:false
  }
 },

 data () {
 return {
  visible:false
 }
 },
 watch:{
  value(val) {
  console.log(val);
  this.visible = val;
  },
  visible(val) {
  this.$emit("visible-change",val);
  }
 },
 methods:{
 cancel(){
  this.visible = false;
 }
 },
 mounted() {
 if (this.value) {
  this.visible = true;
 }
 }
}
</script>


///調(diào)用modal組件
<modal :value="isShow" @visible-change="modalVisibleChange"></modal>

export default {
 name: 'app',
 data () {
 return {
  isShow:true,
 }
 },
 methods:{
  modalVisibleChange(val){
  this.isShow = val;
  }
 }
}

這樣就解決了組件props 雙向綁定的問題。但是這樣有一個(gè)不是太美觀的現(xiàn)象就是在父級(jí)調(diào)用 modal組件的時(shí)候，還需要寫一個(gè) modalVisibleChange 的methods. 總是顯得這部分代碼是多余的。特別是寫一個(gè)讓別人用的公共組件，這樣調(diào)用太麻煩了。能不能不寫method來(lái)實(shí)現(xiàn)props的雙向綁定呢，答案是可以的。

優(yōu)美解決方案

那就是利用 v-model, 在組件內(nèi)部放置一個(gè) 隱藏的input 控件來(lái)保存v-model的值，進(jìn)行雙向綁定

改成如下代碼：

<template>
 <div class="modal" v-show="visible">
  <div class="close" @click="cancel">X</div>
  <input type="text" :value="value" style='display:none;'>
 </div>
</template>

<script>
export default {
 props: {
  value: {
  type: Boolean,
  default:false
  }
 },

 data () {
 return {
  visible:false
 }
 },
 watch:{
  value(val) {
  console.log(val);
  this.visible = val;
  },
  visible(val) {
  this.$emit('input', val);
  }
 },
 methods:{
 cancel(){
  this.visible = false;
 }
 },
 mounted() {
 if (this.value) {
  this.visible = true;
 }
 }
}
</script>


///調(diào)用modal組件

 <modal v-model="isShow"></modal>

export default {
 name: 'app',
 data () {
 return {
  isShow:false
 }
 }
}
</script>

這樣調(diào)用組件的代碼是不是很簡(jiǎn)潔，其他人員要調(diào)用的話，會(huì)很輕松，只要設(shè)置 isShow 就可以控制 modal 組件的顯示或者隱藏，同時(shí) 如果是modal 組件內(nèi)部關(guān)閉按鈕關(guān)閉的，狀態(tài)也會(huì)傳到 isShow。

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

您可能感興趣的文章: