将 v-model 传递到 Vue 3 中组件内的复选框？

Question

我想在 Vue3 组件中嵌入一个复选框，并将v-model绑定传递给该复选框。

组件内部：

<!-- Tile.vue -->
<template>
  <div>
    <input type=checkbox v-model="$attrs">
  </div>
</template>
<script>
export default {inheritAttrs: false}
</script>

然后在外部文件中：

<template>
<Tile value="carrot" v-model="foods" />
<Tile value="tomatoes" v-model="foods" />
</template>
<script setup>
var foods = ref([]);
</script>

我该如何实现这一目标？

文档说这v-model只是:modelValueand的简写@update:modelValue，但这并不通用，因为 Vue 对于表单元素的行为显然有所不同，例如智能地监听onchange而不是oninput修改属性checked而不是value依赖于节点。

如果我v-model在外部组件上使用，如何将其转发到复选框并获得与 Vue 相同的智能行为？

Answer 1

我发现了大量有争议的信息。有些人建议使用@input事件（带有 v-model 和项目数组的 Vue 3 自定义复选框组件）。有些人建议发出modelValue:update而不是update:modelValue（https://github.com/vuejs/core/issues/2667#issuecomment-732886315）。等等..经过一小时的最新尝试和错误后，以下对我有用Vuejs3

孩子

<template>
  <div class="form-check noselect">
    <input class="form-check-input" type="checkbox" :id="id" :checked="modelValue" @change="$emit('update:modelValue', $event.target.checked)" />
    <label class="form-check-label" :for="id"><slot /></label>
  </div>
</template>

<script>
import { v4 as uuidv4 } from "uuid";

export default {
  inheritAttrs: false,
  emits: ["update:modelValue"],
  props: {
    modelValue: {
      type: Boolean,
      required: true,
    },
  },
  setup() {
    return {
      id: uuidv4(),
    };
  },
};
</script>

家长：

<Checkbox v-model="someVariable">Is true?</Checkbox>

您可以验证它是否有效，但在父级中执行此操作：

    var someVariable= ref(false);

    watch(someVariable, () => {
      console.log(someVariable.value);
    });

ps 上面的其他解决方案对我不起作用。作者建议使用value属性。但在例子中他传递了v-model属性。所以我不知道它到底应该如何工作。