vue3 父子组件之间的数据双向绑定

 

父组件: 直接使用 v-model="值"

子组件：约定写法

this.$emit("update:modelValue", this.numValue);

<template>
  <div class="input inlinebox">
    <input type="text" v-model.number="numValue" @input="handleInput" /">
  </div>
</template>

<script>
export default {
  name: "NumAddSubtractor",
  props: {
    modelValue: {
      type: Number,
      default: 0
    }
  },
  data: () => ({
    // props里面的值是不可以修改的，所以需要自己声明一个变量，来进行随业务的变化
    numValue: 0
  }),
  beforeMount() {
    this.numValue = this.modelValue;
  },
  methods: {
    dishNumReduce() {
      this.numValue = this.numValue - 1;
      this.$emit("update:modelValue", this.numValue);
    },
    dishNumAdd() {
      this.numValue =  this.numValue + 1;
      this.$emit("update:modelValue", this.numValue);
    },
    handleInput() {
      this.$emit("update:modelValue", this.numValue);
    }
  }
}
</script>