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 相关文章推荐
js 格式化时间日期函数小结
Mar 20 Javascript
jquery 提交值不为空的元素示例代码
May 10 Javascript
解决jQuery动态获取手机屏幕高和宽的问题
May 07 Javascript
JavaScript设计模式之代理模式介绍
Dec 28 Javascript
jQuery 选择器详解
Jan 19 Javascript
js闭包实现按秒计数
Apr 23 Javascript
jquery ztree异步搜索(搜叶子)实践
Feb 25 Javascript
Web前端新人笔记之jquery入门心得(新手必看)
May 17 Javascript
jQuery利用sort对DOM元素进行排序操作
Nov 07 Javascript
JavaScript实现水平进度条拖拽效果
Jan 18 Javascript
AngularJS实现的输入框字数限制提醒功能示例
Oct 26 Javascript
Vue.js实现立体计算器
Feb 22 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
基于jQuery实现的当离开页面时出现提示的实现代码
2011/06/27 Javascript
js关闭当前页面(窗口)的几种方式总结
2013/03/05 Javascript
jquery ajax请求方式与提示用户正在处理请稍等
2014/09/01 Javascript
IE中getElementsByName()对有些元素无效的解决方案
2014/09/28 Javascript
Bootstrap与KnockoutJs相结合实现分页效果实例详解
2016/05/03 Javascript
使用JavaScript实现ajax的实例代码
2016/05/11 Javascript
AngularJS入门教程之ng-class 指令用法
2016/08/01 Javascript
js实现一个可以兼容PC端和移动端的div拖动效果实例
2016/12/09 Javascript
Vue.js 表单控件操作小结
2018/03/29 Javascript
在HTML文档中嵌入JavaScript的四种方法
2018/05/07 Javascript
微信小程序中遇到的iOS兼容性问题小结
2018/11/14 Javascript
JavaScript观察者模式原理与用法实例详解
2020/03/10 Javascript
vue 扩展现有组件的操作
2020/08/14 Javascript
详解Python的Django框架中的模版相关知识
2015/07/15 Python
Python基于回溯法子集树模板解决旅行商问题(TSP)实例
2017/09/05 Python
对python添加模块路径的三种方法总结
2018/10/16 Python
pandas使用apply多列生成一列数据的实例
2018/11/28 Python
python无限生成不重复(字母,数字,字符)组合的方法
2018/12/04 Python
pycharm配置pyqt5-tools开发环境的方法步骤
2019/02/11 Python
浅谈python之高阶函数和匿名函数
2019/03/21 Python
python 获取sqlite3数据库的表名和表字段名的实例
2019/07/17 Python
python连接PostgreSQL数据库的过程详解
2019/09/18 Python
python实现遍历文件夹图片并重命名
2020/03/23 Python
Keras自定义IOU方式
2020/06/10 Python
日本订房网站,预订日本星级酒店/温泉旅馆:Relux(支持中文)
2020/01/03 全球购物
Ajxa常见问题都有哪些
2014/03/26 面试题
安全检查验收制度
2014/01/12 职场文书
留学推荐信怎么写
2014/01/25 职场文书
信息专业学生学习的自我评价
2014/02/17 职场文书
法人授权委托书范本
2014/04/04 职场文书
大学生活感想
2015/08/10 职场文书
践行三严三实心得体会(2016推荐篇)
2016/01/06 职场文书
2016年情人节广告语
2016/01/28 职场文书
Python Pandas解析读写 CSV 文件
2022/04/11 Python
vue修饰符.capture和.self的区别
2022/04/22 Vue.js
win sever 2022如何占用操作主机角色
2022/06/25 Servers