Vue 中實現雙向綁定的 4 種方法

WrBug 發布于2019-08-26 11:49 / 818人閱讀

摘要：一般我們會這樣做完善個人信息尊姓大名確認取消寫一兩個組件還好，組件規模一旦擴大，寫雙向綁定真能寫出毛病來。

1. v-model 指令

上例不過是一個語法糖，展開來是：

2. .sync 修飾符

這也是一個語法糖，剝開來是：

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

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

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

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

而應如此：

{
  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 插件

有需求如此：開發一個 Prompt 組件，要求同步用戶的輸入，點擊按鈕可關閉彈窗。

一般我們會這樣做：

寫一兩個組件還好，組件規模一旦擴大，寫雙向綁定真能寫出毛病來。于是，為了解放生產力，有了 vue-better-sync 這個輪子，且看用它如何改造我們的 Prompt 組件：

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

GitHub：fjc0k/vue-better-sync

云服務器 GPU云服務器中實現單點登錄 asp中實現登錄 asp中實現文件 java中實現線程

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

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

實現一個簡單的雙向綁定

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

elisa.yang 2019-08-22 11:10 評論0 收藏0
前端MVVM模式及其在Vue和React中的體現

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

沈建明 2019-08-23 12:36 評論0 收藏0
前端知識點總結——Angular

摘要：前端知識點總結一概述基于命令行的開發方式編譯工作集成了打包工具。。。。在瀏覽器中接管展現應用的內容，并根據我們提供的操作指令響應用戶的交互。在開發時，八大組成部分模塊組件模板自帶的標簽指令綁定相關的的語法元數據告訴如何處理一個類。前端知識點總結——Angular 一、Angular概述基于命令行的開發方式？ ①hot reload ②編譯工作 ③集成了webpack打包工具。。。...

BaronZhang 2019-08-22 16:01 評論0 收藏0
Vue、React 和 Angular橫向比對（數據對比）

摘要：同比與去年同期的同比變化率。我們對調查報告進行分析數據統計時間與本文時間差距較遠，數據存在延后。這意味著你可以獲得語法高亮，支持以及更容易使用預處理器如或。的是一個類似語法的可選預處理器，并可在中進行編譯。一些歷史 Angular 是基于 TypeScript 的 Javascript 框架。由 Google 進行開發和維護，它被描述為超級厲害的 JavaScript MVW 框架...

fxp 2019-08-23 14:21 評論0 收藏0