vue 自定义组件 双向绑定值

---

自定义组件

export default {
  name: 'GoodsSpec',
  components: { },
  model: {
    prop: 'value',//监听的值
    event: 'confirm'// 绑定的事件
  },
  props: {
    value: {
      type: Array,
      default() {
        return []
      }
    }
  }
}

组件的使用

<GoodsSpec v-model="spec"  />

 

值变更

1 直接给value赋值

  this.value = 'test'

2 通过$emit赋值

 this.$emit('confirm', this.url)

 

另外如果想要在使用组件时 监听值变更，并自定义处理，可以在组件上使用自定义绑定的事件

<GoodsSpec v-model="spec" @confirm="confirm" />

 

 

发布时间 : 2023-03-01，阅读量：1240

---

本文链接：https://upwqy.com/details/230.html

---