将心比心,方得人心~

vue子组件与父组件之间关于单选框和复选框的值动态切换方法

周洲 2020-06-26 16:45:05

一个组件上的 v-model 默认会利用名为 value 的 prop 和名为 input 的事件,但是像单选框、复选框等类型的输入控件可能会将 value attribute 用于不同的目的model 选项可以用来避免这样的冲突:

Vue.component('base-checkbox', {
  model: {
    prop: 'checked',
    event: 'change'
  },
  props: {
    checked: Boolean
  },
  template: `
    <input
      type="checkbox"
      v-bind:checked="checked"
      v-on:change="$emit('change', $event.target.checked)"
    >
  `
})

html部分:

<base-checkbox v-model="lovingVue"></base-checkbox>



打赏

『微信打赏』

Tag标签v-model 

上一篇: vue2具名插槽

下一篇: 通过插槽分发内容

我是有底线的