vue3和vue2的v-model

• vue3组件支持v-model

  • Vue2 v-model 语法糖原理：:value="数据" @input="数据=$event"

  • Vue3 v-model 语法糖原理：:modelValue="数据" @update:modelValue="数据=$event"

父组件

<CartTest v-model="count" />

  components: { CartTest },
  setup() {
    const count = ref(0);
    return { count };
  },

子组件

<template>
  <div>
    cart-test组件 计数器：{{ modelValue }}
    <button @click="updateCount">+1</button>
  </div>
</template>

<script>
export default {
  name: "CartTest",
  props: {
    modelValue: {
      type: Number,
    },
  },
  emits: ["update:modelValue"],
  setup(props, { emit }) {
    console.log(props.modelValue);
    const updateCount = () => {
      // 通知父组件，让父组件去修改
      emit("update:modelValue", props.modelValue + 1);
    };
    return { updateCount };
  },
};
</script>