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警告]：避免直接更改道具，因为该值将是父组件重新渲染时覆盖。而是使用数据或基于属性值的计算属性。道具被变异：“值”

我尝试添加：

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

print(pd.DataFrame.from_dict({i:j for i,j in df2['Fish Count'].str.split(r'(?<=\d)\s')}, orient='index'))

                     0
38           Sand Bass
 16            Sculpin
 10         Blacksmith
138            Sculpin
 28          Sand Bass
150   Sculpin Released
 102           Sculpin
 40            Sanddab
156            Sculpin
 29          Sand Bass
 5       Black Croaker
161            Sculpin

Parent.vue

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

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

无法将检查值从自定义复选框组件传递到父组件

2 个答案: