如何从子组件更改父数据？

Question

在进行了一些挖掘之后，似乎从孩子到父母，您应该通过发出事件来更新数据（而不是通过v-model）。这是我这样做的尝试（无济于事）。

App.vue

<template>
  <div>
    <HelloWorld :count="count" @update:count="count= $event" />
  </div>
</template>

<script>
import HelloWorld from "./components/HelloWorld.vue";

export default {
  name: "App",
  data() {
    return {
      count: 10
    };
  },
  components: {
    HelloWorld
  }
};
</script>

HelloWorld.vue

<template>
  <div class="hello">
    <input
      type="number"
      min="0"
      :value="count"
      @input="$emit('input', $event.target.value)"
      style="width:6em"
    />
  </div>
</template>

<script>
export default {
  name: "HelloWorld",
  props: {
    count: Number
  }
};
</script>

我哪里出错了？理想情况下，我希望子组件的输入字段的更改会更改父组件的存款字段。谢谢！

Answer 1

我认为这不起作用，因为您在子组件中缺少 emits: ['update:count'] 选项，但我建议在子组件中将该道具命名为modelValue，并在父组件中使用v-model 指令而不是@update:count事件：

<template>
  <div>
    <HelloWorld v-model="count" />
  </div>
</template>

<script>
import HelloWorld from "./components/HelloWorld.vue";

export default {
  name: "App",
  data() {
    return {
      count: 10
    };
  },
  components: {
    HelloWorld
  }
};
</script>

HelloWorld.vue：

<template>
  <div class="hello">
    <input
      type="number"
      min="0"
      :value="count"
     @input="$emit('update:modelValue', $event.target.value)"
      style="width:6em"
    />
  </div>
</template>

<script>
export default {
  name: "HelloWorld",
  props: {
    modelValue: Number
  },
  emits: ['update:modelValue'],
};
</script>

这允许您创建一个custom input