vue2 封装input组件

这里介绍两种方案

方案一 v-bind

父组件使用v-bind绑定属性值，通过绑定input事件来接收子组件的响应数据。

子组件

<template>
    <div>
        <input type="text" :value="value" @input="inputChange">
    </div>
</template>
<script lang="ts">
import Vue from 'vue'
export default Vue.extend({
    props:{
        value:{
            default: '',
            type: String
        }
    },
    methods:{
        inputChange(e){
            this.$emit('input',e.target.value)  // 这个input对应父组件的绑定的input事件
        }
    }
})
</script>

父组件

<template>
  <div class="about">
    <base-input :value="text" @input="changeEvent"></base-input>
    <div>
      {{text}}
    </div>
  </div>
</template>
<script lang="ts">
import Vue from 'vue'
import baseInput from './base-input.vue'
export default Vue.extend({
  components:{ baseInput },
  data(){
    return {
      text:''
    }
  },
  methods:{
    changeEvent(e){
      this.text  = e
    }
  }
})
</script>

方案二：v-model

父组件使用v-model绑定数据，子组件使用model选项来处理数据。

子组件

<template>
    <div>
        <input type="text" :value="value" @input="inputChange">
    </div>
</template>
<script lang="ts">
import Vue from 'vue'
export default Vue.extend({
    model:{
        prop: 'value',
        event: 'input'  // 这个event的值'input'对应$emit触发的事件'input' 
    },
    props:{
        value:{    // v-model 默认的props是value
            default: '',
            type: String
        }
    },
    methods:{
        inputChange(e){
            this.$emit('input',e.target.value)  // 这个input对应model选项的event值
        }
    }
})
</script>

父组件

<template>
  <div class="about">
    <base-input v-model="text"></base-input>
    <div>
      {{text}}
    </div>
  </div>
</template>
<script lang="ts">
import Vue from 'vue'
import baseInput from './base-input.vue'
export default Vue.extend({
  components:{ baseInput },
  data(){
    return {
      text:''
    }
  }
})
</script>