vue3.0中的v-model

1.给子组件传递了一个名称为 modelValue 的prop

2.给子组件绑定了一个名称为update:modelValue 的自定义事件

 3.在绑定的事件回调callback函数中完成了自动将自定义事件触发时传递的实参赋值给绑定的name属性

组件之间的双向绑定：

父组件：

​
<template>
  <div class="xtx-goods-page">
    <div class="container">
      <div class="goods-info">
          <XtxNumbox :max="10" :min="1" v-model="num"></XtxNumbox>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { ref } from 'vue'
export default {
  setup () {
    const num = ref(1)
    return {
      num
    }
  },
}
</script>

​

子组件： 

<template>
  <div class="xtx-numbox">
    <div class="label" v-if="isLabel">数量</div>
    <div class="numbox">
      <a href="javascript:;" @click="des">-</a>
      <input type="text" readonly :value="num" />
      <a href="javascript:;" @click="add">+</a>
    </div>
  </div>
</template>
<script>
import { ref, watch } from 'vue'
export default {
  name: 'XtxNumbox',
  props: {
    isLabel: {
      type: Boolean,
      default: true
    },
    max: {
      type: Number
    },
    min: {
      type: Number,
      default: 1
    },
    modelValue: {
      type: Number
    }
  },
  setup (props, { emit }) {
    // 实现增减逻辑
    // 1.声明一个响应式num数据
    // 2.实现点击之后的增减逻辑
    // 3.把响应式num绑定到value属性上

    // 实现通过传入props控制最大最小值
    // 1. 声明俩个prop 一个最大一个最小
    // 2. 在增减函数中添加限制逻辑

    const num = ref(props.min)
    function add () {
      if (num.value === props.max) {
        return false
      }
      num.value++
      emit('update:modelValue', num.value)
    }

    function des () {
      if (num.value === props.min) {
        return false
      }
      num.value--
      // 通过触发自定义事件 把最新的num值抛出去
      emit('update:modelValue', num.value)
    }

    // 监听modelValue的变化 每次变化之后 我们都把当前最新的值同步到num
    watch(() => {
      return props.modelValue
    }, () => {
      num.value = props.modelValue
    }, {
      // 一上来就先同步一次
      immediate: true
    })
    return {
      num,
      add,
      des
    }
  }
}
</script>