在Vue中使用v-model进行双向绑定是一个很方便的特性,而v-model指令不过是对绑定value属性和监听input事件操作的语法糖。

所以我们只需要在一个组件上

  • 绑定value属性,
  • 在该组件内某个状态变化时触发input事件

就可以在这个组件上实现双向数据绑定了。

下面就来一颗糖炒栗子,实现一个单选控件。

See the Pen custom vue radio by xingzhi (@xingzhi) on CodePen.

参考

Form-Input-Components-using-Custom-Events