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

Question

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

一般来说，VueJS 中的单选按钮如下所示：

<input type="radio" name="name" value="value" v-model="variable" />

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

<div-radio name="name" value="value" v-model="variable" />

但是，当我查找如何向自定义组件添加 v-model 支持时，我在 Google 上找到的第一个链接声称：

对于input元素，您可以v-model这样使用：

<input v-model="email" />

v-model翻译为：

<input :value="email" @input="e => email = e.target.value" />

如果v-model转换为:value，@input那么似乎不可能同时拥有一个名为“value”的道具和“v-model”——尽管事实上这就是普通的 VueJS 单选按钮的工作方式

我误解了它的v-model工作原理吗？还是有替代解决方案？还是我想要的只是不可能的？

标签： javascriptvue.jsvuejs2

Answer 1

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

model

2.2.0 中的新功能

类型： { prop?: string, event?: string }

细节：

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

例子：

Vue.component('my-checkbox', {
  model: {
    prop: 'checked',
    event: 'change'
  },
  props: {
    // this allows using the `value` prop for a different purpose
    value: String,
    // use `checked` as the prop which take the place of `value`
    checked: {
      type: Number,
      default: 0
    }
  },
  // ...
})

<my-checkbox v-model="foo" value="some value"></my-checkbox>

以上将等价于：

<my-checkbox
  :checked="foo"
  @change="val => { foo = val }"
  value="some value">
</my-checkbox>