vue2组件封装+elementUI

在Vue 2中，你可以通过组件封装来复用Element UI组件。以下是一个简单的例子，展示如何封装一个带有Element UI的输入框组件：

首先，安装Element UI并在你的项目中引入：

npm install element-ui --save

然后，在你的组件文件中，可以这样封装一个输入框组件：

<template>
  <el-input v-model="inputValue" @input="handleInput"></el-input>
</template>
 
<script>
import { Input as ElInput } from 'element-ui';
 
export default {
  components: {
    ElInput
  },
  props: {
    value: [String, Number]
  },
  data() {
    return {
      inputValue: this.value
    };
  },
  methods: {
    handleInput(value) {
      this.$emit('input', value);
    }
  },
  watch: {
    value(newValue) {
      this.inputValue = newValue;
    }
  }
};
</script>

使用封装的组件时，你可以这样做：

<template>
  <custom-input :value="value" @input="handleInput"></custom-input>
</template>
 
<script>
import CustomInput from './path/to/CustomInput.vue';
 
export default {
  components: {
    CustomInput
  },
  data() {
    return {
      value: ''
    };
  },
  methods: {
    handleInput(value) {
      this.value = value;
    }
  }
};
</script>

在这个例子中，CustomInput.vue是封装的组件，而父组件中注册并使用了它。封装组件时，你可以通过props传递数据，并通过自定义事件（这里是input事件）来更新数据。在父组件中，你可以通过监听这个事件来处理接收到的数据。