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

Posted 2023-02-23

【中文标题】无法将选中的值从自定义复选框组件传递给父组件

【英文标题】：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，则无需设置检查值或监听更改事件。父组件长什么样子？

也永远不要改变参考路径，这就是你收到警告的原因 - ***.com/questions/56596784/…

【参考方案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>