一、.sync修饰符的作用

Vue中的数据是单向数据流:父级 prop 的更新会向下流动到子组件中,但是反过来则不行,即子组件无法直接修改父组件中的数据。
但我们常常会遇到需要在子组件中修改父组件数据的场景。.sync修饰符就可以帮助我们实现这种功能。

.sync 修饰符    this.$emit('update:title', newTitle)

Vue通过prop进行双向数据绑定。子组件数据变化,一般只能通过 this.$emit(func, val) 回调父组件函数来传值给父组件。

Vue2.3版本引入sync,作为一个事件绑定语法糖,当子组件触发事件时,父组件会响应事件并实现数据更新。

二、不使用.sync修饰符的写法

父组件:

<template>
  <div>
      <parent-comp :is-show="detailVisible" @update:isShow="func" /> 
  </div>
</template>

<script>
export default {
  methods: {
    func (val) {
        this.detailVisible = val
    }
  }
}
</script>

子组件: 

onClose () {
     this.$emit('update:isShow', false)
}

注意:this.$emit()中update后的字段要与父组件中保持一致

三、使用.sync修饰符的写法

父组件:

<parent-comp :visible.sync="isShow"></parent-comp>

子组件: 

 props: {
    visible: {
      type: Boolean,
      default: false
    }
  },
  methods: {
    // 子组件触发函数
    handleClose() {
      this.$emit('update:visible', false)
    }
  }

Logo

基于 Vue 的企业级 UI 组件库和中后台系统解决方案,为数万开发者服务。

更多推荐