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，阅读量：946

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

vue 中基于element-ui 自定义的可输入的button 、可输入的tag 组件站长工具

阅读排行

禁止谷歌浏览器强制跳转到https ThinkPHP6和Workerman结合实例 FFmpeg 安装 ThinkPHP URL重写 vue中tinymce设置字体大小、字体选择微信JSAPI支付（一）准备工作微信小程序支付（三）退款企业微信三种token 宝塔linux面板重启、重置等命令微信JSAPI支付（三）退款 Homebrew：Mac OS 使用brew工具时报错No remote ‘origin’ vue中实现代码高亮 Git 自动化部署-宝塔 thinkphp-queue 学习笔记 vue 中基于element-ui 自定义的可输入的button 、可输入的tag 组件

云游云记

vue 自定义组件 双向绑定值

vue 自定义组件双向绑定值