脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript类库 → vue.js → vue .sync修饰符的使用

vue .sync修饰符的使用详解

 更新时间：2018年06月15日 13:45:39   作者：再见眸似霜  
这篇文章主要介绍了vue .sync修饰符的使用,本文给大家介绍的非常详细，具有一定的参考借鉴价值，需要的朋友可以参考下

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修饰符的使用，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！

您可能感兴趣的文章:

相关文章

  • 谈谈Vue.js——vue-resource全攻略

    谈谈Vue.js——vue-resource全攻略

    本篇文章主要介绍了谈谈Vue.js——vue-resource全攻略，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2017-01-01
  • Element-UI介绍主题定制、自定义组件和插件扩展的代码示例

    Element-UI介绍主题定制、自定义组件和插件扩展的代码示例

    本文介绍了使用Element-UI实现主题定制、自定义组件和扩展插件的方法和实用案例,在开发过程中,我们可以根据自己的需求,灵活选择相关的技术手段,并不断探索和尝试,以提高开发效率和用户体验,感兴趣的朋友跟随小编一起看看吧
    2024-02-02
  • Vue3图片上传报错：Required part ‘file‘ is not present.的原因及解决方法

    Vue3图片上传报错：Required part ‘file‘ is not present.的原因及解决方法

    这篇文章主要介绍了Vue3图片上传报错：Required part ‘file‘ is not present.的原因及解决方法,文中通过代码示例讲解的非常详细,对大家解决问题有一定的帮助,需要的朋友可以参考下
    2024-09-09
  • Vue使用moment将GMT时间转换为北京时间

    Vue使用moment将GMT时间转换为北京时间

    GMT（Greenwich Mean Time）和UTC（Coordinated Universal Time）是两个时间标准,它们在许多方面非常相似,但也有一些微小的差异,本文给大家详细介绍了Vue使用moment将GMT时间转换为北京时间,需要的朋友可以参考下
    2023-12-12
  • 详解vue-cli3多环境打包配置

    详解vue-cli3多环境打包配置

    这篇文章主要介绍了vue-cli3多环境打包配置，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
    2019-03-03
  • Vue中$attrs与$listeners的使用教程

    Vue中$attrs与$listeners的使用教程

    这篇文章主要介绍了Vue中$attrs与$listeners的使用详解，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
    2021-11-11
  • vue项目配置国际化$t('')的介绍和用法示例

    vue项目配置国际化$t('')的介绍和用法示例

    这篇文章主要给大家介绍了关于vue项目配置国际化 $t('')的介绍和用法的相关资料,多语言和国际化现在已经成为一个网站或应用的必要功能之一,Vue作为一款流行的前端框架,在这方面也有着灵活的解决方案,需要的朋友可以参考下
    2023-09-09
  • Vue实现实时监听页面宽度高度变化

    Vue实现实时监听页面宽度高度变化

    这篇文章主要为大家详细介绍了Vue如何实现实时监听页面宽度高度变化,文中的示例代码讲解详细,感兴趣的小伙伴可以跟随小编一起学习一下
    2024-03-03
  • vue Proxy数据代理进行校验部分源码实例解析

    vue Proxy数据代理进行校验部分源码实例解析

    Proxy提供了强大的Javascript元编程,有许多功能,包括运算符重载,对象模拟,简洁而灵活的API创建,对象变化事件,甚至Vue 3背后的内部响应系统提供动力,这篇文章主要给大家介绍了关于vue Proxy数据代理进行校验部分源码解析的相关资料,需要的朋友可以参考下
    2022-01-01
  • vue中的config目录下index.js解读

    vue中的config目录下index.js解读

    这篇文章主要介绍了vue中的config目录下index.js解读，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
    2023-03-03

最新评论