vue封装组件，input为例

106 阅读 0 评论 70 点赞

我是靠谱客的博主动人过客，这篇文章主要介绍vue封装组件，input为例，现在分享给大家，希望可以做个参考。

input组件：

复制代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
<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>

页面使用：

复制代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
<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>