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>