vue .sync修饰符用法

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后面接着绑定修的属性名。

vue .sync修饰符用法

猜你喜欢