el-input还有必要二次封装吗？

Question

<template>
  <div>
    <el-input v-model="inputValue" v-bind="options"></el-input>
  </div>
</template>

<script>
import {defineComponent, ref, watchEffect} from 'vue';
import {ElInput} from "element-plus";


export default defineComponent({
  name: 'FsInput',
  components: { ElInput },
  props: {
    modelValue: {
      type: [String,Number],
      default: ''
    },
    options: {
      type: Object,
      default: () => ({})
    }
  },
  emits: ['update:modelValue'],
  setup(props, { emit }) {
    const inputValue = ref(props.modelValue);

    watchEffect(() => {
      emit('update:modelValue', inputValue.value);
    });

    return {
      inputValue
    };
  }
});
</script>

感觉跟直接调用差不多

Answer 1

可能是从架构层级考虑 想做一整套（配置化）自定义的组件库吧 方便拓展

Answer 2

如果使用某一第三方组件比如这input, 比如该组件需要做值校验, 值进行特殊的处理, 等其他的特性, 并且使用的地方也多, 就可以进行二次封装, 这个不是一定

在我的项目中就对el-select进行了二次封装

本文参与了SegmentFault 思否面试闯关挑战赛，欢迎正在阅读的你也加入。