vue3 二次组件封装【透传】

vue3 二次组件封装透传

文章目录

  • [vue3 二次组件封装透传](#vue3 二次组件封装透传)

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

属性及事件的透传

  • 基于 el-input 二次封装, $attrs 里面会包含除defineProps定义以外所有额外的属性及事件。
js 复制代码
<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 里面会包含所有的插槽,插槽实际上就是一个一个函数,我们在封装的组件进行遍历传递,这样就动态透传插槽, 而不是一个一个定义,这样不会出现组件插槽时必穿的现象。
js 复制代码
<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 里面是实例的成员变量,这个并没有直接透传的操作, 需要把需要透传的组件实例给当前封装组件的实例一个成员变量的赋值。
js 复制代码
<script>
export default {
  mounted() {
    for (const key in this.$refs.elInp) {
      this[key] = this.$refs.elInp[key];
    }
  },
};
</script>

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

js 复制代码
<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 记录而已。不喜勿喷
相关推荐
qczg_wxg3 小时前
React Native的动画系统
javascript·react native·react.js
漂流瓶jz4 小时前
解锁Babel核心功能:从转义语法到插件开发
前端·javascript·typescript
大怪v5 小时前
老乡,别走!Javascript隐藏功能你知道吗?
前端·javascript·代码规范
ERP老兵-冷溪虎山5 小时前
Python/JS/Go/Java同步学习(第三篇)四语言“切片“对照表: 财务“小南“纸切片术切凭证到崩溃(附源码/截图/参数表/避坑指南/老板沉默术)
java·javascript·python·golang·中医编程·四语言同步学习·职场生存指南
webYin5 小时前
vue2 打包生成的js文件过大优化
前端·vue.js·webpack
gnip5 小时前
结合Worker通知应用更新
前端·javascript
Gazer_S6 小时前
【Element Plus 表单组件样式统一 & CSS 文字特效实现指南】
前端·css·vue.js
_Rookie._6 小时前
vue3 使用css变量
前端·javascript·html
良木林8 小时前
JS函数进阶
开发语言·前端·javascript
小薛博客8 小时前
23、Jenkins容器化部署Vue应用
运维·vue.js·jenkins