vue3 二次组件封装【透传】

vue3 二次组件封装透传

• 背景：工作中，一些 ui 库的功能对我们业务中想要的功能并不满足，要进行定制化二次的封装，但是封装的过程中我们只想要改动的定制的地方， 其它的属性、事件、插槽、ref 还是想原封不动的透传给个组件，我们不进行任何改动，下面记录下透传的方法。

属性及事件的透传

• 基于 el-input 二次封装, $attrs 里面会包含除defineProps定义以外所有额外的属性及事件。

<template>
  <div class="custome-input" :customAttr="customAttr">
    <el-input v-bind="$attrs"> </el-input>
  </div>
</template>

<script lang="ts" setup>
import { onMounted, ref } from "vue";

const props = defineProps({
   customAttr:""
});
</script>

插槽的透传

• 基于 el-input 二次封装, $slots 里面会包含所有的插槽，插槽实际上就是一个一个函数，我们在封装的组件进行遍历传递，这样就动态透传插槽， 而不是一个一个定义，这样不会出现组件插槽时必穿的现象。

<template>
  <div class="custome-input" :customAttr="customAttr">
    <el-input v-bind="$attrs">
      <template v-for="(_,name)in $slots" #[name]="scopedData">
        <slot :name="name" v-bind="scopedData"></slot>
      </template>
    </el-input>
  </div>
</template>

<script lang="ts" setup>
import { onMounted, ref } from "vue";

const props = defineProps({
  customAttr: "",
});
</script>

ref 的透传

• 基于 el-input 二次封装
• vue2 中可以使用：$refs 里面是实例的成员变量，这个并没有直接透传的操作， 需要把需要透传的组件实例给当前封装组件的实例一个成员变量的赋值。

<script>
export default {
  mounted() {
    for (const key in this.$refs.elInp) {
      this[key] = this.$refs.elInp[key];
    }
  },
};
</script>

-下面是 vue3 中的写法, 完整透传 el-input 封装如下：

<template>
  <div class="custome-input" :customAttr="customAttr">
    <el-input v-bind="$attrs">
      <template v-for="(_,name)in $slots" #[name]="scopedData">
        <slot :name="name" v-bind="scopedData"></slot>
      </template>
    </el-input>
  </div>
</template>

<script lang="ts" setup>
import { ref, onMounted, defineExpose } from "vue";
import type { InputInstance } from "element-plus";
const props = defineProps({
  customAttr: "",
});

const input = ref<InputInstance>();
const inputMethods = ref({});

onMounted(() => {
  const refMethods = Object.entries(input.value).filter(
    ([_, value]) => value instanceof Function
  );
  refMethods.forEach(([key, value]) => {
    inputMethods.value[key] = value;
  });
});
defineExpose(inputMethods.value);
</script>

• demo 记录而已。不喜勿喷