Vue2.0利用v-model如何實現(xiàn)組件props雙向綁定-創(chuàng)新互聯(lián)

這篇文章主要介紹了Vue2.0利用 v-model如何實現(xiàn)組件props雙向綁定，具有一定借鑒價值，感興趣的朋友可以參考下，希望大家閱讀完這篇文章之后大有收獲，下面讓小編帶著大家一起了解一下。

站在用戶的角度思考問題，與客戶深入溝通，找到輝縣網(wǎng)站設(shè)計與輝縣網(wǎng)站推廣的解決方案，憑借多年的經(jīng)驗，讓設(shè)計與互聯(lián)網(wǎng)技術(shù)結(jié)合，創(chuàng)造個性化、用戶體驗好的作品，建站類型包括：網(wǎng)站建設(shè)、成都網(wǎng)站制作、企業(yè)官網(wǎng)、英文網(wǎng)站、手機端網(wǎng)站、網(wǎng)站推廣、域名申請、網(wǎng)頁空間、企業(yè)郵箱。業(yè)務(wù)覆蓋輝縣地區(qū)。

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

解決方案一

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

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

這里以最常見的 modal為例子：modal挺合適雙向綁定的，外部可以控制組件的顯示或者隱藏，組件內(nèi)部的關(guān)閉可以控制 visible屬性隱藏，同時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 雙向綁定的問題。但是這樣有一個不是太美觀的現(xiàn)象就是在父級調(diào)用 modal組件的時候，還需要寫一個 modalVisibleChange 的methods. 總是顯得這部分代碼是多余的。特別是寫一個讓別人用的公共組件，這樣調(diào)用太麻煩了。能不能不寫method來實現(xiàn)props的雙向綁定呢，答案是可以的。

優(yōu)美解決方案

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

改成如下代碼：

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

為什么要使用Vue

Vue是一款友好的、多用途且高性能的JavaScript框架，使用vue可以創(chuàng)建可維護性和可測試性更強的代碼庫，Vue允許可以將一個網(wǎng)頁分割成可復(fù)用的組件，每個組件都包含屬于自己的HTML、CSS、JavaScript，以用來渲染網(wǎng)頁中相應(yīng)的地方，所以越來越多的前端開發(fā)者使用vue。

感謝你能夠認真閱讀完這篇文章，希望小編分享的“Vue2.0利用 v-model如何實現(xiàn)組件props雙向綁定”這篇文章對大家有幫助，同時也希望大家多多支持創(chuàng)新互聯(lián)建站，關(guān)注創(chuàng)新互聯(lián)網(wǎng)站建設(shè)公司行業(yè)資訊頻道，更多相關(guān)知識等著你來學(xué)習(xí)!

另外有需要云服務(wù)器可以了解下創(chuàng)新互聯(lián)建站www.muchs.cn，海內(nèi)外云服務(wù)器15元起步，三天無理由+7*72小時售后在線，公司持有idc許可證，提供“云服務(wù)器、裸金屬服務(wù)器、高防服務(wù)器、香港服務(wù)器、美國服務(wù)器、虛擬主機、免備案服務(wù)器”等云主機租用服務(wù)以及企業(yè)上云的綜合解決方案，具有“安全穩(wěn)定、簡單易用、服務(wù)可用性高、性價比高”等特點與優(yōu)勢，專為企業(yè)上云打造定制，能夠滿足用戶豐富、多元化的應(yīng)用場景需求。

文章標題：Vue2.0利用v-model如何實現(xiàn)組件props雙向綁定-創(chuàng)新互聯(lián)
瀏覽路徑：http://www.muchs.cn/article22/dpjhcc.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供動態(tài)網(wǎng)站、全網(wǎng)營銷推廣、網(wǎng)站內(nèi)鏈、響應(yīng)式網(wǎng)站、網(wǎng)站導(dǎo)航、品牌網(wǎng)站設(shè)計

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源：創(chuàng)新互聯(lián)

猜你還喜歡下面的內(nèi)容