Vue.sync修饰符与this.$emit('update:xxx', newXXX)

 

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

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

 

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

父组件： 

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

 

子组件： 

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