无法将选中的值从自定义复选框组件传递给父组件

Question

在我的自定义复选框组件中，我试图将复选框表单字段的值传递给我的父组件：

<template>
  <div class="custom-checkbox">
    <div :class="{ 'bg-white': value }">
      <input
        :id="checkboxId"
        type="checkbox"
        :checked="value"
        v-model="value"
        @change="$emit('input', $event.target.checked)"
      />
    </div>

    <label :for="checkboxId">
      <slot />
    </label>
  </div>
</template>

<script>
export default {
  props: {
    value: {
      type: Boolean,
      default: false
    },
    checkboxId: {
      type: String,
      default: "checkbox-1"
    }
  }
};
</script>

出现此错误：

[Vue warn]: Avoid mutating a prop directly since the value will be overwritten whenever the parent component re-renders. Instead, use a data or computed property based on the prop's value. Prop being mutated: "value"

我尝试添加：

data() {
  return {
    checkedValue: this.value
  };
}

...然后将 v-model="value" 替换为 v-model="checkedValue" 但复选框不再选中，我仍然没有在父组件中获得它的值。

有什么建议吗？

Answer 1

因为你还是直接变异value，抓不抓到@change事件都无所谓

尝试在您的子组件中创建一个带有 getter/setter 的计算组件。

computed: {
    checked: {
        get() {
            return this.value;
        },
        set(value) {
            this.$emit("input", value);
        }
    }
}

使用 checked 作为复选框 v-model。无需绑定任何东西到 :checked，只需 v-model 就足够了。

您可以使用 v-model 将值传递给父级中的此组件。

供参考：https://vuejs.org/v2/guide/forms.html

Answer 2

备案。

CustomCheckbox.vue

<template>
    <input type="checkbox" :checked="value" @change="$emit('input', $event.target.checked)">
</template>

<script>
export default {
    props: ["value"]
};
</script>

Parent.vue

<template>
    <div id="app">
       <custom-checkbox v-model="checked"></custom-checkbox>
    </div>
</template>

<script>
import CustomCheckbox from "./components/CustomCheckbox";

export default {
    data: {
        checked: true
    },
    components: {
        CustomCheckbox
    }
};
</script>

无法将选中的值从自定义复选框组件传递给父组件

Can't pass checked value to parent component from custom checkbox component

vue.js

emit