vue .sync修饰符的使用详解


Posted in Javascript onJune 15, 2018

vue的官网介绍非常不错,先通读一遍。

2.3.0+ 新增

在有些情况下,我们可能需要对一个 prop 进行“双向绑定”。不幸的是,真正的双向绑定会带来维护上的问题,因为子组件可以修改父组件,且在父组件和子组件都没有明显的改动来源。

这也是为什么我们推荐以 update:my-prop-name 的模式触发事件取而代之。举个例子,在一个包含  title prop 的假设的组件中,我们可以用以下方法表达对其赋新值的意图:

this.$emit('update:title', newTitle)

然后父组件可以监听那个事件并根据需要更新一个本地的数据属性。例如:

<text-document
 v-bind:title="doc.title"
 v-on:update:title="doc.title = $event"
></text-document>

为了方便起见,我们为这种模式提供一个缩写,即 .sync 修饰符:

<text-document v-bind:title.sync="doc.title"></text-document>

当我们用一个对象同时设置多个 prop 的时候,也可以将这个 .sync 修饰符和  v-bind 配合使用:

<text-document v-bind.sync="doc"></text-document>

这样会把 doc 对象中的每一个属性 (如  title ) 都作为一个独立的 prop 传进去,然后各自添加用于更新的  v-on 监听器。

以下为代码实例

father.vue

<template>
 <div class="hello">
 //input实时改变wrd的值, 并且会实时改变box里的内容
 <input type="text" v-model="wrd">
 <box :word.sync="wrd" ></box>
 </div>
</template>
<script>
import box from './box' //引入box子组件
export default {
 name: 'HelloWorld',
 data() {
 return {
  wrd: ''
 }
 },
 components: {
 box
 } 
}
</script>
child.vue
<template>
 <div class="hello">
 <div class="ipt">
  <input type="text" v-model="str">
 </div>
 //word是父元素传过来的
 <h2>{{ word }}</h2>
 </div>
</template>
<script>
export default {
 name: 'box',
 data() {
 return {
  str: '',
 }
 },
 props: {
 word: ''
 },
 watch: {
 str: function(newValue, oldValue) {
  //每当str的值改变则发送事件update:word , 并且把值传过去
  this.$emit('update:word', newValue)
 }
 }
}
</script>

那这个修饰符的原理是什么呢?其实还是vue父组件可以监听子组件的事件,自组件可以触发父组件的事件

father.vue

<template>
 <div class="hello">
 <input type="text" v-model="wrd">
 <box @incre="boxIncremend" ></box>
 </div>
</template>
<script>
import box from './box'
export default {
 name: 'HelloWorld',
 data() {
 return {
  wrd: ''
 }
 },
 methods: {
 boxIncremend(e) {
  this.wrd = this.wrd + e
 }
 },
 components: {
 box
 }
}
</script>
child.vue
<template>
 <div class="hello">
  <input type="text" v-model="str">
 <h2>{{ word }}</h2>
 </div>
</template>
<script>
export default {
 name: 'box',
 data() {
 return {
  num: 0
 }
 },
 props: {
 word: ''
 },
 watch: {
 str: function(neww, old) {
  //往父级发射incre事件
  this.$emit('incre', ++this.num)
 }
 },
}
</script>

在没有sync的时候,我们要实现双向绑定,可能需要在父组件里绑定一个事件和一个值

father.vue

<template>
 <div class="hello">
 <input type="text" v-model="wrd">
 <box @incre="boxIncremend" :word="word"></box>
 </div>
</template>
<script>
import box from './box'
export default {
 name: 'HelloWorld',
 data() {
 return {
  word: ''
 }
 },
 methods: {
 boxIncremend(newword) {
  this.word = newword
 }
 },
 components: {
 box
 }
}
</script>
child.vue
<template>
 <div class="hello">
  <input type="text" v-model="str">
 <h2>{{ word }}</h2>
 </div>
</template>
<script>
export default {
 name: 'box',
 props: {
 word: ''
 },
 watch: {
 str: function(newword) {
  //往父级发射incre事件
  this.$emit('incre', newword)
 }
 },
}
</script>

但是有了sync之后,我们就可以这么写

father.vue

<template>
 <div class="hello">
 <input type="text" v-model="wrd">
 <box :wrd.sync="wrd"></box>
 </div>
</template>
<script>
import box from './box'
export default {
 name: 'HelloWorld',
 data() {
 return {
  wrd: ''
 }
 },
 methods: {
 boxIncremend(e) {
  this.wrd = e
 }
 },
 components: {
 box
 }
}
</script>

child.vue

<template>
 <div class="hello">
  <input type="text" v-model="str">
 <h2>{{ word }}</h2>
 </div>
</template>
<script>
export default {
 name: 'box',
 props: {
 word: ''
 },
 watch: {
 str: function(newword) {
  //往父级发射incre事件
  this.$emit('update:word', newword)
 }
 },
}
</script>

父组件中的子组件,少写了一个自定义事件属性,子组件中$emit直接出发父组件中数据的更新,清新明了。使用中需要注意的是,update和后面对应的数据名不能写错。

父子组件的双向数据绑定

父组件改变数据可以改变子组件, 但是子组件的内容改变并不会影响到父组件

可以通过2.3.0新增的sync修饰符来达到双向绑定的效果

father.vue

<template>
 <div class="hello">
 //input实时改变wrd的值, 并且会实时改变box里的内容
 <input type="text" v-model="wrd">
 <box :word.sync="wrd" ></box>
 </div>
</template>
<script>
import box from './box' //引入box子组件
export default {
 name: 'HelloWorld',
 data() {
 return {
  wrd: ''
 }
 },
 components: {
 box
 } 
}
</script>
<style scoped></style>

box.vue

<template>
 <div class="hello">
 <div class="ipt">
  <input type="text" v-model="str">
 </div>
 //word是父元素传过来的
 <h2>{{ word }}</h2>
 </div>
</template>
<script>
export default {
 name: 'box',
 data() {
 return {
  str: '',
 }
 },
 props: {
 word: ''
 },
 watch: {
 str: function(newValue, oldValue) {
  //每当str的值改变则发送事件update:word , 并且把值传过去
  this.$emit('update:word', newValue)
 }
 }
}
</script>
<style scoped></style>

利用了父级可以在子元素上监听子元素的事件

father.vue

<template>
 <div class="hello">
 <input type="text" v-model="wrd">
 <box @incre="boxIncremend" ></box>
 </div>
</template>
<script>
import box from './box'
export default {
 name: 'HelloWorld',
 data() {
 return {
  wrd: ''
 }
 },
 methods: {
 boxIncremend(e) {
  this.wrd = this.wrd + e
 }
 },
 components: {
 box
 }
}
</script>
<style scoped></style>

box.vue

<template>
 <div class="hello">
  <input type="text" v-model="str">
 <h2>{{ word }}</h2>
 </div>
</template>
<script>
export default {
 name: 'box',
 data() {
 return {
  num: 0
 }
 },
 props: {
 word: ''
 },
 watch: {
 str: function(neww, old) {
  //往父级发射incre事件
  this.$emit('incre', ++this.num)
 }
 },
}
</script>
<style scoped></style>

总结

以上所述是小编给大家介绍的vue .sync修饰符的使用,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
基于jquery的动态创建表格的插件
Apr 05 Javascript
在JavaScript中监听IME键盘输入事件
May 29 Javascript
js实现点小图看大图效果的思路及示例代码
Oct 28 Javascript
Js实现手机发送验证码时按钮延迟操作
Jun 20 Javascript
js使用循环清空某个div中的input标签值
Sep 29 Javascript
简单的jQuery入门指引
Jul 28 Javascript
javascript截图 jQuery插件imgAreaSelect使用详解
May 04 Javascript
AngularJS ng-repeat指令中使用track by子语句解决重复数据遍历错误问题
Jan 21 Javascript
使用OPENLAYERS3实现点选的方法
Sep 24 Javascript
vue+vue-validator 表单验证功能的实现代码
Nov 13 Javascript
基于Axios 常用的请求方法别名(详解)
Mar 13 Javascript
axios封装,使用拦截器统一处理接口,超详细的教程(推荐)
May 02 Javascript
vue项目webpack中Npm传递参数配置不同域名接口
Jun 15 #Javascript
vue和webpack项目构建过程常用的npm命令详解
Jun 15 #Javascript
vue和webpack安装命令详解
Jun 15 #Javascript
Webpack devServer中的 proxy 实现跨域的解决
Jun 15 #Javascript
详解webpack的proxyTable无效的解决方案
Jun 15 #Javascript
vue中axios的封装问题(简易版拦截,get,post)
Jun 15 #Javascript
vue和webpack打包项目相对路径修改的方法
Jun 15 #Javascript
You might like
图解上海144收音机
2021/03/02 无线电
搜索和替换文件或目录的一个好类--很实用
2006/10/09 PHP
php图片的裁剪与缩放生成符合需求的缩略图
2013/01/11 PHP
在Debian系统下配置LNMP的教程
2015/07/09 PHP
PHP实现清除wordpress里恶意代码
2015/10/21 PHP
php 实现Hash表功能实例详解
2016/11/29 PHP
php实现图片按比例截取的方法
2017/02/06 PHP
CI框架(CodeIgniter)实现的数据库增删改查操作总结
2018/05/23 PHP
JavaScript 调试器简介
2009/02/21 Javascript
避免 showModalDialog 弹出新窗体的原因分析
2010/05/31 Javascript
JavaScript中提前声明变量或函数例子
2014/11/12 Javascript
JavaScript之Object类型介绍
2015/04/01 Javascript
深入浅出分析javaScript中this用法
2015/05/09 Javascript
JavaScript实现带箭头标识的多级下拉菜单效果
2015/08/27 Javascript
灵活的理解JavaScript中的this指向
2016/02/25 Javascript
js前端面试题及答案整理(一)
2016/08/26 Javascript
js基础之DOM中元素对象的属性方法详解
2016/10/28 Javascript
JavaScript如何实现图片懒加载(lazyload) 提高用户体验(增强版)
2016/11/30 Javascript
vuejs父子组件通信的问题
2017/01/11 Javascript
详谈Ajax请求中的async:false/true的作用(ajax 在外部调用问题)
2017/02/10 Javascript
javascript 原型与原型链的理解及应用实例分析
2020/02/10 Javascript
js实现tab栏切换效果
2020/08/02 Javascript
JavaScript 实现拖拽效果组件功能(兼容移动端)
2020/11/11 Javascript
[01:22:29]真视界:2019年国际邀请赛总决赛
2020/01/29 DOTA
python中使用urllib2伪造HTTP报头的2个方法
2014/07/07 Python
Python 调用Java实例详解
2017/06/02 Python
python 多维切片之冒号和三个点的用法介绍
2018/04/19 Python
使用pandas将numpy中的数组数据保存到csv文件的方法
2018/06/14 Python
python自动化工具之pywinauto实例详解
2019/08/26 Python
Python 使用元类type创建类对象常见应用详解
2019/10/17 Python
Python绘制三角函数图(sin\cos\tan)并标注特定范围的例子
2019/12/04 Python
Python xpath表达式如何实现数据处理
2020/06/13 Python
网吧收银员岗位职责
2013/12/14 职场文书
百度吧主申请感言
2014/01/12 职场文书
产品生产计划书
2014/05/07 职场文书
HTML+CSS 实现顶部导航栏菜单制作
2021/06/03 HTML / CSS