成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

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

SimonMa / 3372人閱讀

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

在項(xiàng)目中開始使用vue2來構(gòu)建項(xiàng)目了，跟 vue1 很大的一處不同在于2 取消了props 的雙向綁定，改成只能從父級傳到子級的單向數(shù)據(jù)流，初衷當(dāng)然是好的，為了避免雙向綁定在項(xià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  組件





///調(diào)用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來實(shí)現(xiàn)props的雙向綁定呢，答案是可以的。

優(yōu)美解決方案

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

改成如下代碼：






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

  

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

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

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/86937.html

相關(guān)文章

  • vue2實(shí)踐（持續(xù)更新）

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

    n7then 評論0 收藏0

  • 深刻理解Vue中的組件

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

    mdluo 評論0 收藏0

  • vue2.0學(xué)習(xí)筆記（表單輸入綁定）

    摘要：復(fù)選框當(dāng)選中時當(dāng)沒有選中時這里的和特性并不會影響輸入控件的特性，因?yàn)闉g覽器在提交表單時并不會包含未被選中的復(fù)選框。 1、基礎(chǔ)用法 v-model指令可以實(shí)現(xiàn)表單元素和Model中數(shù)據(jù)的雙向數(shù)據(jù)綁定。只能運(yùn)用在表單元素中（input、radio、text、address、email、select、checkbox、textarea） 可以用 v-model 指令在表單 、 及 元素上...

    Seay 評論0 收藏0

  • 詳解vue組件三大核心概念

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

    rickchen 評論0 收藏0

  • 一套基于vue2.0高質(zhì)量的UI框架，前期開發(fā)中

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

    explorer_ddf 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<