Vue 中实现双向绑定的 4 种方法

WrBug 发布于2019-08-26 11:49 / 789人阅读

摘要：一般我们会这样做完善个人信息尊姓大名确认取消写一两个组件还好，组件规模一旦扩大，写双向绑定真能写出毛病来。

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中实现线程

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/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