Vue 3：无法从 child 组件复选框更新 parent 数据

Question

我正在尝试将复选框移动到 child 组件，但我无法让它更新存储在 parent 中的数据。

Parent:

<template>
  <CheckboxComponent
    :value="profile.doYouAgree"
    label="Do you agree?"
    @input="profile.doYouAgree = $event.target.value"
  />
  <div>{{ profile.doYouAgree }}</div>
</template>

<script>
import CheckboxComponent from "./components/CheckboxComponent.vue";
import { reactive } from "vue";
const profile = reactive({
  name: "A Name",
  email: "someone@me.com",
  doYouAgree: false,
});

export default {
  name: "App",
  components: {
    CheckboxComponent,
  },
  setup() {
    return {
      profile,
    };
  },
};
</script>

Child:

<template>
  <div class="hello">
    <label for="checkbox">{{ label }}</label>
    <input
      type="checkbox"
      :value="modelValue"
      right
      @input="$emit('update:modelValue', $event.target.value)"
    />
  </div>
</template>

<script>
export default {
  name: "CheckboxComponent",
  props: {
    label: {
      type: String,
      default: "",
    },
    modelValue: {
      type: Boolean,
    },
  },
};
</script>

在下面的沙箱中，我希望在选中该框时 false 变为 true： https://codesandbox.io/s/gifted-worker-vm9lyt?file=/src/App.vue

Answer 1

这里有几个问题：

$event.target.value 是字符串而不是布尔值。将其更改为 $event.target.checked
您的 parent 正在收听 input 但您的 child 正在发射 update:modelValue。为自己省去很多麻烦，在 parent:

v-model

<CheckboxComponent
  v-model="profile.doYouAgree"
  label="Do you agree?"
/>

Vue 3：无法从 child 组件复选框更新 parent 数据

Vue 3: Unable to update parent data from child component checkbox

javascript

vue.js

vue-component