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实现预览提交的表单代码分享
May 21 Javascript
JavaScript函数的一些注意要点小结及js匿名函数
Nov 10 Javascript
用瀑布流的方式在网页上插入图片的简单实现方法
Sep 23 Javascript
jquery中用jsonp实现搜索框功能
Oct 18 Javascript
Bootstrap CSS组件之分页(pagination)和翻页(pager)
Dec 17 Javascript
详解angularJs中自定义directive的数据交互
Jan 13 Javascript
微信小程序 request接口的封装实例代码
Apr 26 Javascript
BootStrap selectpicker后台动态绑定数据的方法
Jul 28 Javascript
Express下采用bcryptjs进行密码加密的方法
Feb 07 Javascript
vue 的keep-alive缓存功能的实现
Mar 22 Javascript
postman+json+springmvc测试批量添加实例
Mar 31 Javascript
教你30秒发布一个TypeScript包到NPM的方法步骤
Jul 22 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
VFP与其他应用程序的集成
2006/10/09 PHP
php仿ZOL分页类代码
2008/10/02 PHP
深入探讨PHP中的内存管理问题
2011/08/31 PHP
php中url函数介绍及使用示例
2014/02/13 PHP
PHP中批量生成静态html(命令行下运行PHP)
2014/04/19 PHP
Zend Framework 2.0事件管理器(The EventManager)入门教程
2014/08/11 PHP
thinkPHP3.2使用RBAC实现权限管理的实现
2019/08/27 PHP
PHP内存溢出优化代码详解
2021/02/26 PHP
动手学习无线电
2021/03/10 无线电
javascript 对象的定义方法
2007/01/10 Javascript
用js判断浏览器是否是IE的比较好的办法
2007/05/08 Javascript
Firefox中autocomplete=&quot;off&quot; 设置不起作用Bug的解决方法
2011/03/25 Javascript
jquery中获取select选中值的代码
2011/06/27 Javascript
javascript动画对象支持加速、减速、缓入、缓出的实现代码
2012/09/30 Javascript
javascript常用经典算法实例详解
2015/11/25 Javascript
基于BootStrap的Metronic框架实现页面链接收藏夹功能按钮移动收藏记录(使用Sortable进行拖动排序)
2016/08/29 Javascript
react高阶组件经典应用之权限控制详解
2017/09/07 Javascript
JS随机数产生代码分享
2018/02/24 Javascript
详解vue的diff算法原理
2018/05/20 Javascript
Nodejs异步流程框架async的方法
2019/06/07 NodeJs
js中值引用和地址引用实例分析
2019/06/21 Javascript
用Python输出一个杨辉三角的例子
2014/06/13 Python
numpy 返回函数的上三角矩阵实例
2019/11/25 Python
使用 Python 处理3万多条数据只要几秒钟
2020/01/19 Python
Python任务调度利器之APScheduler详解
2020/04/02 Python
Python venv虚拟环境配置过程解析
2020/07/08 Python
python 8种必备的gui库
2020/08/27 Python
详解Python爬虫爬取博客园问题列表所有的问题
2021/01/18 Python
python绘图模块之利用turtle画图
2021/02/12 Python
纯CSS3单页切换导航菜单界面设计的简单实现
2016/08/16 HTML / CSS
前台文员我鉴定
2014/01/12 职场文书
应届毕业生自荐信例文
2014/02/26 职场文书
财务人员岗位职责
2015/02/03 职场文书
海上钢琴师的观后感
2015/06/11 职场文书
催款函范本大全
2015/06/24 职场文书
详解Vue router路由
2021/11/20 Vue.js