Javascript 如何将'value'道具和'v-model'道具分配给自定义Vue组件？

我想为“radio div”创建一个自定义Vue组件——一个类似于单选按钮的div（有一个插槽用于包含我想要的任何内容），这样您就可以选择它，并且在多个具有相同名称的div中只能选择一个

通常，VueJS中的单选按钮如下所示：

所以我想要一个类似的API：

然而，当我在谷歌上找到第一个链接时，我声称：

对于

input

元素，您可以像这样使用

v-model

：

v-model

转换为：

如果将

v-model

转换为

：value

和

@input

，则似乎不可能在“v-model”的同时拥有一个名为“value”的道具，尽管这是正常的VueJS单选按钮的工作方式

---

我是否误解了

v-model

的工作原理？还是有其他解决方案？或者我想要的是不可能的？

要使用v-model，您需要手动处理值和@input：

<template>
 <div>
  <input type="radio" :name="name" :value="value" @input="$emit('input', $event)" />
 </div
</template>

<script>
 export default {
  name: 'div-radio',
  props:{
    value: Boolean,
    name: String
  }
 }
</script>

Vue允许通过组件选项配置
v-model
的
prop
名称和
事件
名称：

型号
2.2.0中的新功能

类型：
{prop？：string，event？：string}

详细信息：

允许自定义组件自定义与
v-model
一起使用时使用的道具和事件。默认情况下，组件上的
v-model
将
value
用作道具，将
input
用作事件，但某些输入类型（如复选框和单选按钮）可能希望将
value
道具用于不同的用途。使用
model
选项可以避免这种情况下的冲突

示例：

Vue.component（'my-checkbox'{
型号：{
道具：“已检查”，
事件：“更改”
},
道具：{
//这允许将“value”属性用于不同的用途
值：字符串，
//使用'checked'作为道具，代替'value'`
检查：{
类型：数字，
默认值：0
}
},
// ...
})



上述内容相当于：



...
<div-radio name="name" v-model="variable1" />
<div-radio name="name" v-model="variable2" />
...