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

資訊專(zhuān)欄INFORMATION COLUMN

Vue 中實(shí)現(xiàn)雙向綁定的 4 種方法

WrBug / 825人閱讀

摘要：一般我們會(huì)這樣做完善個(gè)人信息尊姓大名確認(rèn)取消寫(xiě)一兩個(gè)組件還好，組件規(guī)模一旦擴(kuò)大，寫(xiě)雙向綁定真能寫(xiě)出毛病來(lái)。

1. v-model 指令

上例不過(guò)是一個(gè)語(yǔ)法糖，展開(kāi)來(lái)是：

2. .sync 修飾符

這也是一個(gè)語(yǔ)法糖，剝開(kāi)來(lái)是：

my-dialog 組件在 visible 變化時(shí) this.$emit("update:visible", newVisible) 即可。

3. model 屬性 (JSX/渲染函數(shù)中)

Vue 在 2.2.0 版本以后，允許自定義組件的 v-model，這就導(dǎo)致在 JSX / 渲染函數(shù)中實(shí)現(xiàn) v-model 時(shí)得考慮組件的不同配置，不能一律如此（假使 my-dialog 組件的 model 為 { prop: "visible", event: "change" }）：

{
  render(h) {
    return h("my-dialog", {
      props: { value: this.dialogVisible },
      on: { input: newVisible => this.dialogVisible = newVisible }
    })
  }
}

而應(yīng)如此：

{
  render(h) {
    return h("my-dialog", {
      props: { visible: this.dialogVisible },
      on: { change: newVisible => this.dialogVisible = newVisible }
    })
  }
}

然而，利用 model 屬性，完全可以做到不用管它 prop、event 的目的：

{
  render(h) {
    return h("my-dialog", {
      model: {
        value: this.dialogVisible,
        callback: newVisible => this.dialogVisible = newVisible
      }
    })
  }
}

JSX 中這樣使用：

{
  render() {
    return (
       this.dialogVisible = newVisible
          }
        }}
      />
    )
  }
}
4. vue-better-sync 插件

有需求如此：開(kāi)發(fā)一個(gè) Prompt 組件，要求同步用戶(hù)的輸入，點(diǎn)擊按鈕可關(guān)閉彈窗。

一般我們會(huì)這樣做：

寫(xiě)一兩個(gè)組件還好，組件規(guī)模一旦擴(kuò)大，寫(xiě)雙向綁定真能寫(xiě)出毛病來(lái)。于是，為了解放生產(chǎn)力，有了 vue-better-sync 這個(gè)輪子，且看用它如何改造我們的 Prompt 組件：

vue-better-sync 統(tǒng)一了 v-model 和 .sync 傳遞數(shù)據(jù)的方式，你只需 this.actual${PropName} = newValue 或者 this.sync${PropName}(newValue) 即可將新數(shù)據(jù)傳遞給父組件。

GitHub：fjc0k/vue-better-sync

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

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

相關(guān)文章

  • 實(shí)現(xiàn)一個(gè)簡(jiǎn)單的雙向綁定

    摘要：下圖展示了實(shí)現(xiàn)雙向綁定的流程實(shí)現(xiàn)一個(gè)簡(jiǎn)單的雙向綁定雙向綁定最最最初級(jí)進(jìn)階版操作是非常耗時(shí)和好性能，所以在優(yōu)化過(guò)程中先從操作入手。 接觸Vue有一段時(shí)間了，但是對(duì)于其雙向綁定的實(shí)現(xiàn)一直是似懂非懂，今天看到一篇寫(xiě)的比較好的文章 傳送門(mén)1 根據(jù)原作者的指導(dǎo)自己也去實(shí)現(xiàn)了一遍簡(jiǎn)單的 demo （本文的demo均基于Object.defineProperty 實(shí)現(xiàn)數(shù)據(jù)劫持，利用了對(duì)Vue.js實(shí)...

    elisa.yang 評(píng)論0 收藏0

  • 前端MVVM模式及其在Vue和React中的體現(xiàn)

    摘要：在模式中一般把層算在層中，只有在理想的雙向綁定模式下，才會(huì)完全的消失。層將通過(guò)特定的展示出來(lái)，并在控件上綁定視圖交互事件，一般由框架自動(dòng)生成在瀏覽器中。三大框架的異同三大框架都是數(shù)據(jù)驅(qū)動(dòng)型的框架及是雙向數(shù)據(jù)綁定是單向數(shù)據(jù)綁定。 MVVM相關(guān)概念 1） MVVM典型特點(diǎn)是有四個(gè)概念：Model、View、ViewModel、綁定器。MVVM可以是單向綁定也可以是雙向綁定甚至是不綁...

    沈建明 評(píng)論0 收藏0

  • 前端知識(shí)點(diǎn)總結(jié)——Angular

    摘要：前端知識(shí)點(diǎn)總結(jié)一概述基于命令行的開(kāi)發(fā)方式編譯工作集成了打包工具。。。。在瀏覽器中接管展現(xiàn)應(yīng)用的內(nèi)容，并根據(jù)我們提供的操作指令響應(yīng)用戶(hù)的交互。在開(kāi)發(fā)時(shí)，八大組成部分模塊組件模板自帶的標(biāo)簽指令綁定相關(guān)的的語(yǔ)法元數(shù)據(jù)告訴如何處理一個(gè)類(lèi)。 前端知識(shí)點(diǎn)總結(jié)——Angular 一、Angular概述 基于命令行的開(kāi)發(fā)方式？ ①hot reload ②編譯工作 ③集成了webpack打包工具 。。。...

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

  • Vue、React 和 Angular橫向比對(duì)（數(shù)據(jù)對(duì)比）

    摘要：同比與去年同期的同比變化率。我們對(duì)調(diào)查報(bào)告進(jìn)行分析數(shù)據(jù)統(tǒng)計(jì)時(shí)間與本文時(shí)間差距較遠(yuǎn)，數(shù)據(jù)存在延后。這意味著你可以獲得語(yǔ)法高亮，支持以及更容易使用預(yù)處理器如或。的是一個(gè)類(lèi)似語(yǔ)法的可選預(yù)處理器，并可在中進(jìn)行編譯。 一些歷史 Angular 是基于 TypeScript 的 Javascript 框架。由 Google 進(jìn)行開(kāi)發(fā)和維護(hù)，它被描述為超級(jí)厲害的 JavaScript MVW 框架...

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

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

0條評(píng)論

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