vue .sync修饰符用法

泡泡大怪兽

已于 2022-10-25 22:33:47 修改

阅读量811

点赞数

分类专栏： Vue 文章标签： vue.js javascript 前端

于 2022-10-25 22:15:32 首次发布

本文链接：https://blog.youkuaiyun.com/weixin_45032067/article/details/127522145

版权

Vue 专栏收录该内容

7 篇文章

订阅专栏

Vue.js中，.sync修饰符用于实现prop的“双向绑定”效果，允许子组件通过$emit('update:show')触发事件来更新父组件的show属性，从而控制自身的显示隐藏。这种做法避免了直接修改prop导致的Vue警告，提供了一种语法糖的写法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

vue中.sync修饰符的作用可以实现prop中的数据“双向绑定”，也就是说可以实现子组件修改更新父组件中的值，它跟v-model一样其实是一种语法糖的写法。

但是在vue中prop中的数据是单向数据流，如果在子组件中直接修改prop中的数据Vue 会在浏览器的控制台中发出警告。

有这样一个需求：父组件中有个子组件，默认不展示，父组件用一个show属性控制子组件的显示隐藏。

如果不使用.sync修饰符实现方式如下

父组件
<template>
<div>
   <child v-if="show" :show="show" @freshShow="getShow" />
</div>
</template>

<script>
import child from './child.vue'
export default {
  components: {
    child
  },
  data() {
    return {
      show: false
    };
  },
methods: {
  getShow(val) {
    this.show = val
  }
}
};

子组件
<template>
<div v-if=show"">
   这是子组件弹窗
</div>
</template>

<script>
import child from './child.vue'
export default {
  props:['show'],
  methods: {
    closeDialog() {
      this.$emit('freshShow', false); //触发 update:show 事件，父组件监听获取发射出的值
    }
  }
};

使用.sync修饰符

父组件
<template>
<div>
   <child v-if="show" :show.sync="show" />
</div>
</template>

<script>
import child from './child.vue'
export default {
  components: {
    child
  },
  data() {
    return {
      show: false
    };
  }
};

子组件
<template>
<div v-if=show"">
   这是子组件弹窗
</div>
</template>

<script>
import child from './child.vue'
export default {
  props:['show'],
  methods: {
    closeDialog() {
      this.$emit('update:show', false); //触发 update:show 事件，父组件监听获取发射出的值
    }
  }
};

所以.sync 修饰符就是为这种模式提供的一个缩写，即可以在父组件省略事件绑定同样可以做到修改父组件中绑定的属性值，而子组件通过$emit('update:show')触发事件，update后面接着绑定修的属性名。