Vue 实现双向绑定的四种方法


Posted in Javascript onMarch 16, 2018

1. v-model 指令

<input v-model="text" />

上例不过是一个语法糖,展开来是:

<input
 :value="text"
 @input="e => text = e.target.value"
/>

2. .sync 修饰符

<my-dialog :visible.sync="dialogVisible" />

这也是一个语法糖,剥开来是:

<my-dialog
 :visible="dialogVisible"
 @update:visible="newVisible => dialogVisible = newVisible"
/>

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 (
   <my-dialog
    {...{
     model: {
      value: this.dialogVisible,
      callback: newVisible => this.dialogVisible = newVisible
     }
    }}
   />
  )
 }
}

4. vue-better-sync 插件

有需求如此:开发一个 Prompt 组件,要求同步用户的输入,点击按钮可关闭弹窗。

Vue 实现双向绑定的四种方法

一般我们会这样做:

<template>
 <div v-show="_visible">
  <div>完善个人信息</div>
  <div>
   <div>尊姓大名?</div>
   <input v-model="_answer" />
  </div>
  <div>
   <button @click="_visible = !_visible">确认</button>
   <button @click="_visible = !_visible">取消</button>
  </div>
 </div>
</template>
<script>
export default {
 name: 'prompt',
 props: {
  answer: String,
  visible: Boolean
 },
 computed: {
  _answer: {
   get() {
    return this.answer
   },
   set(value) {
    this.$emit('input', value)
   }
  },
  _visible: {
   get() {
    return this.visible
   },
   set(value) {
    this.$emit('update:visible', value)
   }
  }
 }
}
</script>

写一两个组件还好,组件规模一旦扩大,写双向绑定真能写出毛病来。于是,为了解放生产力,有了 vue-better-sync 这个轮子,且看用它如何改造我们的 Prompt 组件:

<template>
 <div v-show="actualVisible">
  <div>完善个人信息</div>
  <div>
   <div>尊姓大名?</div>
   <input v-model="actualAnswer" />
  </div>
  <div>
   <button @click="syncVisible(!actualVisible)">确认</button>
   <button @click="syncVisible(!actualVisible)">取消</button>
  </div>
 </div>
</template>
<script>
import VueBetterSync from 'vue-better-sync'
export default {
 name: 'prompt',
 mixins: [
  VueBetterSync({
   prop: 'answer', // 设置 v-model 的 prop
   event: 'input' // 设置 v-model 的 event
  })
 ],
 props: {
  answer: String,
  visible: {
   type: Boolean,
   sync: true // visible 属性可用 .sync 双向绑定
  }
 }
}
</script>

vue-better-sync 统一了 v-model 和 .sync 传递数据的方式,你只需 this.actual${PropName} = newValue 或者 this.sync${PropName}(newValue) 即可将新数据传递给父组件。

GitHub: fjc0k/vue-better-sync

总结

以上所述是小编给大家介绍的Vue 实现双向绑定的四种方法,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
基于jquery的checkbox下拉框插件代码
Jun 25 Javascript
基于Jquery的动态添加控件并取值的实现代码
Sep 24 Javascript
jquery读取xml文件实现省市县三级联动的方法
May 29 Javascript
很实用的js选项卡切换效果
Aug 12 Javascript
js编写的treeview使用方法
Nov 11 Javascript
vue.js入门(3)——详解组件通信
Dec 02 Javascript
AngularJS 实现点击按钮获取验证码功能实例代码
Jul 13 Javascript
node文件批量重命名的方法示例
Oct 23 Javascript
JavaScript中将值转换为字符串的五种方法总结
Jun 06 Javascript
微信小程序页面间传递数组对象方法解析
Nov 06 Javascript
js实现无缝轮播图特效
May 09 Javascript
解决Vue-Router升级导致的Uncaught (in promise)问题
Aug 07 Javascript
p5.js入门教程之鼠标交互的示例
Mar 16 #Javascript
JS匿名函数和匿名自执行函数概念与用法分析
Mar 16 #Javascript
解决npm管理员身份install时出现权限的问题
Mar 16 #Javascript
vue-router相关基础知识及工作原理
Mar 16 #Javascript
axios post提交formdata的实例
Mar 16 #Javascript
在vue组件中使用axios的方法
Mar 16 #Javascript
axios发送post请求,提交图片类型表单数据方法
Mar 16 #Javascript
You might like
PHP的FTP学习(一)
2006/10/09 PHP
使用apache模块rewrite_module (转)
2007/02/14 PHP
又一个php 分页类实现代码
2009/12/03 PHP
php操作redis中的hash和zset类型数据的方法和代码例子
2014/07/05 PHP
php5.3不能连接mssql数据库的解决方法
2014/12/27 PHP
PHP对象、模式与实践之高级特性分析
2016/12/08 PHP
PHP中for循环与foreach的区别
2017/03/06 PHP
PHP 返回数组后处理方法(开户成功后弹窗提示)
2017/07/03 PHP
PHP字符串和十六进制如何实现互相转换
2020/07/16 PHP
JavaScript 获得选中文本内容的方法
2009/02/15 Javascript
基于jquery的网页SELECT下拉框美化代码
2010/10/28 Javascript
node.js中的url.resolve方法使用说明
2014/12/10 Javascript
jQuery中appendTo()方法用法实例
2015/01/08 Javascript
jQuery实现从身份证号中获取出生日期和性别的方法分析
2016/02/25 Javascript
javascript代码调试之console.log 用法图文详解
2016/09/30 Javascript
ECMAScript6--解构
2017/03/30 Javascript
JS表格组件神器bootstrap table使用指南详解
2017/04/12 Javascript
从零开始学习Node.js系列教程二:文本提交与显示方法
2017/04/13 Javascript
Vue2 Vue-cli中使用Typescript的配置详解
2017/07/24 Javascript
jquery select插件异步实时搜索实例代码
2017/10/20 jQuery
vue 设置proxyTable参数进行代理跨域
2018/04/09 Javascript
Vue.js中使用iView日期选择器并设置开始时间结束时间校验功能
2018/08/12 Javascript
Javascript 类型转换、封闭函数及常见内置对象操作示例
2019/11/15 Javascript
vuex管理状态仓库使用详解
2020/07/29 Javascript
解决vue组件没显示,没起作用,没报错,但该显示的组件没显示问题
2020/09/02 Javascript
SpringBoot+Vue 前后端合并部署的配置方法
2020/12/30 Vue.js
Python常用模块用法分析
2014/09/08 Python
Python基于pygame实现单机版五子棋对战
2019/12/26 Python
浅析Python的命名空间与作用域
2020/11/25 Python
HTML5实现页面切换激活的PageVisibility API使用初探
2016/05/13 HTML / CSS
迟到检讨书800字
2014/01/13 职场文书
项目投资建议书
2014/05/16 职场文书
员工激励培训演讲稿
2014/09/16 职场文书
超市员工管理制度
2015/08/06 职场文书
Python一行代码实现自动发邮件功能
2021/05/30 Python
Python学习之时间包使用教程详解
2022/03/21 Python