Vue组件二次封装的实用技巧是什么

这篇文章主要讲解了“Vue组件二次封装的实用技巧是什么”，文中的讲解内容简单清晰，易于学习与理解，下面请大家跟着小编的思路慢慢深入，一起来研究和学习“Vue组件二次封装的实用技巧是什么”吧！

透传 Attribute

我们可以使用一个没有参数的 v-bind来实现props,events的透传， 它会将一个对象的所有属性都作为 attribute 应用到目标元素或组件上, 这在官方文档中有着详细介绍。

<BaseButton v-bind="$attrs"/>

其中$attrs包含组件可以透传属性的对象, 透传属性包括props,events, class,style,id等。(不包含接收组件显式声明的 props、emits以及slots )

如下,是一个封装el-input的默认可清空的的组件，由于我们已经在defineProps声明过clearable, 所以此时我们需要显性传递clearable属性

<template>
  <div class="my-input">
    {{ label }}
    <el-input v-bind="$attrs" :clearable="clearable"></el-input>
  </div>
</template>

<script setup>
defineProps({
  label: String,
  clearable: {
    type: Boolean,
    default: true,
  },
});
</script>

如果我们不希望透传某些属性比如class, 我们可以通过useAttrs来实现

<template>
  <div class="my-input">
    {{ label }}
    <el-input v-bind="filteredAttrs" :clearable="clearable"></el-input>
  </div>
</template>

<script setup>
import { computed, useAttrs } from 'Vue';

defineProps({
  label: String,
  clearable: {
    type: Boolean,
    default: true,
  },
});

const attrs = useAttrs();
const filteredAttrs = computed(() => {
  return { ...attrs, class: undefined };
});
</script>

上述封装的组件还有个缺点, 就是我们将无法使用el-input本身提供的slot,下面我们就来实现一个可以透传 slot的组件

透传 slot

slot可以通过下面这种方式透传的

<!-- 在组件中创建新的对应名称的插槽 -->
<template #slotName>
<!-- 在插槽内部使用对应名称的插槽 -->
    <slot name="slotName" />
</template>

普通slot

如果透传的slot比较少，我们可以通过在封装组件内部定义并使用插槽<template v-slot:slotName><slot name="slotName" /></template>来透传插槽

<template #slotName>
    <slot name="slotName" />
</template>

动态插槽名

如果需要透传的slot不固定或者较多，我们可以通过动态插槽名称透传

<template #[slotName] v-for="(slot, slotName) in $slots" >
    <slot :name="slotName" />
</template>

如下是一个透传的slot的el-input组件

<template>
  <div class="my-input">
    {{ label }}
    <el-input v-bind="$attrs" :clearable="clearable">
      <template #[slotName] v-for="(slot, slotName) in $slots">
          <slot :name="slotName" />
      </template>
    </el-input>
  </div>
</template>

<script setup>
defineProps({
  label: String,
  clearable: {
    type: Boolean,
    default: true,
  },
});
</script>

作用域插槽

如果需要封装组件使用了作用域插槽，我们可以通过<template v-slot:slotName="slotProps"><slot name="slotName" v-bind="slotProps"/></template>来透传作用域插槽插槽。

<template #[slotName]="slotProps" v-for="(slot, slotName) in $slots" >
    <slot :name="slotName" v-bind="slotProps"/>
</template>

封装组件存在的问题

组件实例属性和方法的调用

封装后的组件我们无法按照之前的情况调用组件实例中的属性和方法，比如BaseButton有focus方法,在封装之前我们可以通过下面这种方式调用

// 调用BaseButton的组件父组件
// <BaseButton ref="button">
const button = ref();
button.value.focus()

对于封装后的组件，由于此时button指向我们的MyButton,并不指向BaseButton的实例，所以我们需要在包装的组件中声明并暴露BaseButton事例

//我们封装的组件
// MyButton.Vue
// <BaseButton ref="button">
const button = ref();

注意如果我们使用 <script setup>，是没办法访问实例中的属性的，详情参考vuejs.org/api/sfc-scr&hellip;

此时可以通过defineExpose显式公开ref属性

// 我们封装的组件
// MyButton.Vue
// <BaseButton ref="button">
const button = ref();
defineExpose({
  button
});

然后在父组件中我就可以通过实例链式调用封装的组件了

// <MyButton ref="button">
const button = ref();
button.value.button.focus()

感谢各位的阅读，以上就是“Vue组件二次封装的实用技巧是什么”的内容了，经过本文的学习后，相信大家对Vue组件二次封装的实用技巧是什么这一问题有了更深刻的体会，具体使用情况还需要大家实践验证。这里是亿速云，小编将为大家推送更多相关知识点的文章，欢迎关注！