vue自定义组件实现v-model双向绑定数据的实例代码

<common-checkbox :checked="goodsSelected" class="left" :height="'16px'" :width="'16px'"  @checkChange="checkChange"></common-checkbox>

     /**
     * 接收子组件回传进行处理
     */
    checkChange(value) {
      this.goodsSelected=value//子组件数据赋值给父组件
    }

    /**
     * 切换选中回传
     */
    toggleCheck(value) {
      this.$emit('changeCheck', value)//回传方法，把子组件变化后的数据回传给父组件处理
    }

 this.$emit('input', value) 

export default {
  name: 'CommonCkeckBox',
  model: {
    prop: 'checked',
    event: 'changeCheck'
  },
    props: {
    checked: {
      type: Boolean,
      default: false,
    }, // 选中状态
  }
  }

<template>
<div class="check-box-container"  @click="toggleCheck()" :style="{width:width,height:height}">
        <div class="checkbox-icon">
              <!-- 三种状态 选中  未选  禁用 -->
              <img alt :src="`${$cdnImageUrl}/cart/icon-selected.png`" :width="width" :height="height" key="select" v-if="checked&&!disabled"/>
              <img alt :src="`${$cdnImageUrl}/cart/icon-unselected.png`" :width="width" :height="height" key="unselected" v-if="!checked&&!disabled" />
              <img alt :src="`${$cdnImageUrl}/cart/icon-unselected.png`" :width="width" :height="height" class="disabled" key="unselected"  v-if="disabled"/>
            </div>
        <slot></slot>
</div>
</template>
<script>
/**
 * 全局统一弹窗
 */
export default {
  name: 'CommonCkeckBox',
  model: {
    prop: 'checked',
    event: 'changeCheck'
  },
  props: {
    checked: {
      type: Boolean,
      default: false,
    }, // 选中状态
    disabled: {
      type: Boolean,
      default: false,
    }, // 是否禁用
    width: {
      type: String,
      default: '16px',
    }, // 按钮默认宽度
    height: {
      type: String,
      default: '16px',
    }, // 按钮默认高度
  },
  created() {
  },
  data() {
    return {
    }
  },
  methods: {
    /**
     * 切换选中回传
     */
    toggleCheck() {
      this.$emit('changeCheck', !this.checked)
      this.$emit('toggleCheck')
    }
  },
  watch: {
    checked: {
      handler(newValue, oldValue) {
      // 开放状态变更事件
        this.$emit('onChange')
      },
      deep: true
    }
  },
}
</script>
<style lang="scss"  scoped>
.check-box-container{
    display: inline-block;
    .checkbox-icon{
        img{
          transform: translateZ(0);
          will-change: auto;
        }
        .disabled{
          background-color:#f5f5f5;
          border-radius: 50%;
        }
    }
}
</style>

      <common-checkbox v-model="item.goodsSelected" class="left" :width="'16px'"  :height="'16px'"></common-checkbox>