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 相关文章推荐
获取表单控件原始(初始)值的方法
Aug 21 Javascript
鼠标移入移出事件改变图片的分辨率的两种方法
Dec 17 Javascript
jQuery实现的给图片点赞+1动画效果(附在线演示及demo源码下载)
Dec 31 Javascript
js表单验证实例讲解
Mar 31 Javascript
Boostrap基础教程之JavaScript插件篇
Sep 08 Javascript
js实现短信发送倒计时功能(正则验证)
Feb 10 Javascript
JavaScript实现分页效果
Mar 28 Javascript
vue移动端UI框架实现QQ侧边菜单组件
Mar 09 Javascript
vue路由懒加载的实现方法
Mar 12 Javascript
es6中Promise 对象基本功能与用法实例分析
Feb 23 Javascript
创建nuxt.js项目流程图解
Mar 13 Javascript
Vue2项目中对百度地图的封装使用详解
Jun 16 Vue.js
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
PHP mcrypt可逆加密算法分析
2011/07/19 PHP
PHP源代码数组统计count分析
2011/08/02 PHP
Zend Studio 实用快捷键一览表(精心整理)
2013/08/10 PHP
PHP的Json中文处理解决方案
2016/09/29 PHP
javascript 事件查询综合 推荐收藏
2010/03/10 Javascript
jQuery取id有.的值的方法
2014/05/21 Javascript
打造个性化的功能强大的Jquery虚拟键盘(VirtualKeyboard)
2014/10/11 Javascript
浅谈JavaScript function函数种类
2014/12/29 Javascript
JavaScript使用shift方法移除素组第一个元素实例分析
2015/04/06 Javascript
JS+CSS实现类似QQ好友及黑名单效果的树型菜单
2015/09/22 Javascript
jQuery代码性能优化的10种方法
2016/06/21 Javascript
BootStrap下拉菜单和滚动监听插件实现代码
2016/09/26 Javascript
javascript中href和replace的比较(详解)
2016/11/25 Javascript
微信开发 JS-SDK 6.0.2 经常遇到问题总结
2016/12/08 Javascript
jQuery实现右侧抽屉式在线客服功能
2017/12/25 jQuery
Node错误处理笔记之挖坑系列教程
2018/06/05 Javascript
深入理解Puppeteer的入门教程和实践
2019/03/05 Javascript
extjs4图表绘制之折线图实现方法分析
2020/03/06 Javascript
微信小程序完美解决scroll-view高度自适应问题的方法
2020/08/08 Javascript
python实现的简单窗口倒计时界面实例
2015/05/05 Python
基于python list对象中嵌套元组使用sort时的排序方法
2018/04/18 Python
python实现ip代理池功能示例
2019/07/05 Python
python无序链表删除重复项的方法
2020/01/17 Python
HTML5 Canvas阴影使用方法实例演示
2013/08/02 HTML / CSS
行政管理专业推荐信
2013/11/02 职场文书
大学生学业生涯规划
2014/01/05 职场文书
会计岗位描述
2014/02/22 职场文书
《蒙娜丽莎之约》教学反思
2014/02/27 职场文书
预备党员的自我评价
2014/03/12 职场文书
《大海那边》教学反思
2014/04/09 职场文书
重阳节标语大全
2014/10/07 职场文书
2014最新自愿离婚协议书范本
2014/11/19 职场文书
个园导游词
2015/02/04 职场文书
工程服务质量承诺书
2015/04/29 职场文书
2015年度内部审计工作总结
2015/05/20 职场文书
鸦片战争观后感
2015/06/09 职场文书