Vue3.0 中v-model用法:

举个例子:  看到这,第一想到的是我这里要用v-model进行双向数据绑定

vue3.0中v-model的使用:

1. props: modelValue   2. emit ('updata: modelValue  ' ,参数)

父组件: 

<XtxNumbox label="数量" v-model="num" :min="1" :max="goodsData.inventory" />

const num = ref (1) 

子组件   

<template>
  <div class="xtx-numbox">
    <div class="label">{{label}}</div>
    <div class="numbox">
      <a href="javascript:;" @click="changeNum(-1)">-</a>
      <input type="text" readonly :value="modelValue">
      <a href="javascript:;" @click="changeNum(1)">+</a>
    </div>
  </div>
</template>
export default {
  name: 'XtxNumbox',
  props: {
    label: { type: String, default: '数量' },
    modelValue: { type: Number, default: 1 },
    min: { type: Number, default: 0 },
    max: { type: Number, default: 10000 }
  },
 setup (props, { emit }) {
    const changeNum = (step) => {
      let t = step + props.modelValue
      if (t < props.min || t > props.max) return

      emit('update:modelValue', t)
    }
    return { changeNum }
  }
}