vue [自定义组件的 v-model]

vue [自定义组件的 v-model]

• vue官网描述

  一个组件上的 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)"
      >
    `
  })
  

  现在在这个组件上使用 v-model 的时候：

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

  这里的 lovingVue 的值将会传入这个名为 checked 的 prop。同时当 `` 触发一个 change 事件并附带一个新的值的时候，这个 lovingVue 的属性将会被更新。

  注意你仍然需要在组件的 props 选项里声明 checked 这个 prop。

• v-model 本身实现就是通过事件监听表单元素，动态改变表单元素绑定的value来实现双向绑定

• 案例：

  //InputComponent.vue
  <template>
    <div>
      <el-input :value="username" @input="inputHandler"></el-input>
       <p>
          这是一段文本
       </p>
    </div>
  </template>
  
  <script>
    export default {
      name: 'InputComponent',
      data() {
        return {
  
        }
      },
      model: {
        prop: 'username',  //绑定的值
        event: 'input'	//表单改变触发的事件，不同表单元素监听的事件不同
      },
      props: {
        username: String
      },
      methods: {
        inputHandler(ev) {
          console.log(ev)
          this.$emit('input', ev)
        }
      }
    }
  </script>
  
  <style scoped>
  
  </style>
  

  import 引入 InputComponent 组件
  <template>
    <div>
      <InputComponent v-model='bindValue'></InputComponent>
    </div>
  </template>
  
  <script>
    export default {
      data() {
        return {
  		bindValue: ''
        }
      },
      components: {
          InputComponent
      }
      methods: {
        
      }
    }
  </script>
  
  <style scoped>
  
  </style>