亚洲中字慕日产2020,大陆极品少妇内射AAAAAA,无码av大香线蕉伊人久久,久久精品国产亚洲av麻豆网站

資訊專(zhuān)欄INFORMATION COLUMN

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

SimonMa / 3418人閱讀

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

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

解決方案一

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

用data對(duì)象中創(chuàng)建一個(gè)props屬性的副本

watch props屬性 賦予data副本 來(lái)同步組件外對(duì)props的修改

watch data副本，emit一個(gè)函數(shù) 通知到組件外

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

///modal.vue  組件





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


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

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

優(yōu)美解決方案

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

改成如下代碼：






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

  

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

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

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

轉(zhuǎn)載請(qǐng)注明本文地址：http://www.ezyhdfw.cn/yun/86937.html

相關(guān)文章

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

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

    n7then 評(píng)論0 收藏0

  • 深刻理解Vue中的組件

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

    mdluo 評(píng)論0 收藏0

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

    摘要：復(fù)選框當(dāng)選中時(shí)當(dāng)沒(méi)有選中時(shí)這里的和特性并不會(huì)影響輸入控件的特性，因?yàn)闉g覽器在提交表單時(shí)并不會(huì)包含未被選中的復(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 評(píng)論0 收藏0

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

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

    rickchen 評(píng)論0 收藏0

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

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

    explorer_ddf 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<