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

【问题标题】：Can't pass checked value to parent component from custom checkbox component无法将选中的值从自定义复选框组件传递给父组件
【发布时间】：2020-03-28 00:22:13
【问题描述】：

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

<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 警告]：避免直接改变一个 prop，因为它的值会是每当父组件重新渲染时被覆盖。相反，使用基于道具值的数据或计算属性。道具存在变异：“价值”

我尝试添加：

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

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

有什么建议吗？

【问题讨论】：

如果您使用的是 v-model，则无需设置检查值或监听更改事件。父组件长什么样子？
也永远不要改变参考路径，这就是你收到警告的原因 - stackoverflow.com/questions/56596784/…

标签： vue.js emit

【解决方案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

【讨论】：

你是如何在父组件中使用这个组件的？请更新您的帖子。

【解决方案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>

【讨论】：