Vue2 利用 v-model 實現組件props雙向綁定的優美解決方案

SimonMa 發布于2019-08-21 11:37 / 3334人閱讀

摘要：在項目中開始使用來構建項目了，跟很大的一處不同在于取消了的雙向綁定，改成只能從父級傳到子級的單向數據流，初衷當然是好的，為了避免雙向綁定在項目中容易造成的數據混亂。能不能不寫來實現的雙向綁定呢，答案是可以的。

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

解決方案一

然后開始參考網上和github上的方案等等，發現很多解決方案是這樣的

用data對象中創建一個props屬性的副本

watch props屬性賦予data副本來同步組件外對props的修改

watch data副本，emit一個函數通知到組件外

這里以最常見的 modal為例子：
modal挺合適雙向綁定的，外部可以控制組件的顯示或者隱藏，組件內部的關閉可以控制 visible屬性隱藏，同時visible 屬性同步傳輸到外部

///modal.vue  組件





///調用modal組件


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

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

優美解決方案

那就是利用 v-model, 然后使用value來保存v-model的值，進行雙向綁定

改成如下代碼：






///調用modal組件

  

export default {
  name: "app",
  data () {
    return {
      isShow:false
    }
  }
}

這樣調用組件的代碼是不是很簡潔，其他人員要調用的話，會很輕松，只要設置 isShow 就可以控制 modal 組件的顯示或者隱藏，同時如果是modal 組件內部關閉按鈕關閉的，狀態也會傳到 isShow

GPU云服務器云服務器可以利用vps實現的是什么雙向綁定雙向數據綁定 java優美的代碼

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/86937.html

vue2實踐（持續更新）

摘要：記錄一些小技巧和踩過的坑由于本篇文章內容太多，導致編輯器有點卡，所以新開辟了一篇實踐二，后續再這里更新。組件的生命周期函數是在標簽里的數據發生變化時候觸發數據可能更新了，但是沒有綁定到上面的話，不會調用鉤子函數。記錄一些小技巧和踩過的坑由于本篇文章內容太多，導致SF編輯器有點卡，所以新開辟了一篇 vue2實踐（二），后續再這里更新。 1. props 帶不帶冒號的區別 ...

n7then 2019-08-20 15:05 評論0 收藏0
深刻理解Vue中的組件

摘要：還可以在某個實例中注冊只有自己能使用的組件。當在一個組件中，使用了其他自定義組件時，就會利用子組件的屬性和事件來和父組件進行數據交流。正確的做法是，在父組件中綁定屬性值時，加上修飾符。 2019-06-20更新: Vue2.6已經更新了關于內容插槽和作用域插槽的API和用法，為了不誤導大家，我把插槽的內容刪除了。詳情請看官網 2018-07-19更新: 更新作用域插槽的屬性: sco...

mdluo 2019-08-20 18:34 評論0 收藏0
vue2.0學習筆記（表單輸入綁定）

摘要：復選框當選中時當沒有選中時這里的和特性并不會影響輸入控件的特性，因為瀏覽器在提交表單時并不會包含未被選中的復選框。 1、基礎用法 v-model指令可以實現表單元素和Model中數據的雙向數據綁定。只能運用在表單元素中（input、radio、text、address、email、select、checkbox、textarea）可以用 v-model 指令在表單、及元素上...

Seay 2019-08-23 18:35 評論0 收藏0
詳解vue組件三大核心概念

摘要：前言本文主要介紹屬性事件和插槽這三個基礎概念使用方法及其容易被忽略的一些重要細節。至于如何改變，我們接下去詳細介紹單向數據流這個概念出現在組件通信。比如上例中在子組件中修改父組件傳遞過來的數組從而改變父組件的狀態。的一個核心思想是數據驅動。前言本文主要介紹屬性、事件和插槽這三個vue基礎概念、使用方法及其容易被忽略的一些重要細節。如果你閱讀別人寫的組件，也可以從這三個部分展開，它們...

rickchen 2019-08-23 17:51 評論0 收藏0
一套基于vue2.0高質量的UI框架，前期開發中

摘要：使用屬性時選中的值為的值默認值屬性類型說明組合中的所有全部禁用默認值屬性類型說明組合中所有的尺寸默認值屬性類型說明類似這樣的數組，其中指定當前項是否選中，為當前項的文字描述默認值組件組件組件組件組件組件組件組件寫在前邊自己在業余時間開發的一套基于vue的UI框架，初衷是在平時的開發過程中，發現有很多業務利用現有的UI框架實現起來比較麻煩，另外自己也希望可以寫一套可以盡量多的滿足業務...

explorer_ddf 2019-08-26 14:06 評論0 收藏0