vue封装组件，input为例

input组件：

<template>
  <div>
    <input :value="currentValue" @input="inputload">
    <!--<input :value="currentValue" @input="$emit('input', $event.target.value)">-->
  </div>
</template>
<script>
export default {
  name: 'Input',
  data() {
    return {
      currentValue: this.value,
    };
  },
  props: {
    value: {
      type: [String, Number],
      default: ''
    },
  },
  watch: {
    value(val) {
      this.setCurrentValue(val);
    }
  },
  methods: {
    setCurrentValue(value) {
      console.log(value)
      if (value === this.currentValue) return;     
      this.currentValue = value;
    },
    inputload(event){
      let value = event.target.value;      
      this.$emit('input', value)
    }
  }
}
</script>

页面使用：

<template>
    <div>
        姓名：<yls-input v-model="inputvalue"></yls-input>  
        昵称：<yls-input v-model="inputvalue2"></yls-input>
        学校：<yls-input v-model="inputvalue3"></yls-input>
        <button @click="submit">提交</button>      
    </div>
</template>
<script>
import Input from '@/components/Input.vue'
export default {
    data() {
        return {
            inputvalue: '',
            inputvalue2: '',
            inputvalue3: ''
        }
    },
    components: {
        'yls-input':Input
    },
    methods:{
        submit(){
            console.log(this.inputvalue,this.inputvalue2,this.inputvalue3)
        }
    }
}
</script>

效果图：

最后

以上就是动人过客为你收集整理的vue封装组件，input为例的全部内容，希望文章能够帮你解决vue封装组件，input为例所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。