v-model 组件封装在vue2和vue3中的用法

v-model 一般用于vue的自定义组件封装动态修改和form 表单中input动态数据响应绑定处理，以前用form表单比较多，但是用于组件封装时，我很少用到，今天看同事写代码时，瞬间醍醐灌顶，下面用示例演示：

一、vue2中使用：

1. 父组件：

<template>

<ConsumeTip

        v-model="consumeNumber"

        :text="`当前XXX剩余 ${consumeNumber} 篇，为享有更多文档数量`">

        <div class="div-item">

          <svg-icon icon-class="ppt-doc"></svg-icon>

          <div class="title">

            <label>智能写作演讲稿</label>

          </div>

        </div>

      </ConsumeTip>

</template>

<script>

export default {

data (){

return{

consumeNumber:0

}

}

}

</script>

2. 子组件：

<template>

  <el-tooltip class="item" effect="dark" :placement="placement">

    <template #content>

      <span>{{ text }}</span>，点击

      <el-link type="primary" :underline="false" @click="toBuy"

        >购买{{ buyText }}</el-link>

    </template>

  
     <slot></slot>



  </el-tooltip>

</template>

<script>

export default {

 props: {

    text: {

      type: String,

      required: true,

    },

}，

  data() {

    return {

      consumeNumber: 0,

    };

  },

  watch: {

    consumeNumber(value) {

      this.$emit("input", value);

    },

  },

  methods:{

    toBuy(){

        this.consumeNumber++

    }

  }
}

</script>

二 vue3中使用

前面都是差不多的，只是vue3,父组件调用时，是通过$emit('update:modelValue'，XX)调用的

$emit('update:modelValue', this.consumeNumber++)