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

原创文章,作者:ItWorker,如若转载,请注明出处:https://blog.ytso.com/282872.html

(0)
上一篇 2022年8月29日
下一篇 2022年8月29日

相关推荐

发表回复

登录后才能评论