美文网首页
v-model 定制组件

v-model 定制组件

作者: 小杰的简书 | 来源:发表于2018-11-24 10:47 被阅读0次
    `v-model` 默认使用 `value` 作为 prop,以及默认使用 `input` 作为监听事件,然而,对于某些类型的 input 元素
    (例如 checkbox 和 radio),由于这些类型的 input 元素本身具有 [不同用法](https://developer.mozilla.org/en-
    US/docs/Web/HTML/Element/input/checkbox#Value),可能会占用 `value` 特性。在这种情况下,使用组件
    的 `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)"
        >
      `
    })
    <base-checkbox v-model="lovingVue"></base-checkbox>
    lovingVue 的值就会传递给 checked prop。当 <base-checkbox> 内部触发一个 change 事件,并且传递一个新值,lovingVue 属性就会进行更新。
    

    相关文章

      网友评论

          本文标题:v-model 定制组件

          本文链接:https://www.haomeiwen.com/subject/sztsxqtx.html