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: `
        
      `
    })
    

    现在在这个组件上使用 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>
    

你可能感兴趣的:(vue)