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)
    },
  }

 

上一篇:Vue .sync修饰符与this.$emit(update:xxx)


下一篇:sync修饰符