Vue组件二次封装的实用技巧是什么
导读:本文共2653字符,通常情况下阅读需要9分钟。同时您也可以点击右侧朗读,来听本文内容。按键盘←(左) →(右) 方向键可以翻页。
摘要: 透传 Attribute我们可以使用一个没有参数的 v-bind来实现props,events的透传, 它会将一个对象的所有属性都作为 attribute 应用到目标元素或组件上, 这在官方文档中有着详细介绍。<BaseButtonv-bind="$attrs"/>其中$attrs包含组件可以透传属性的对象, 透传属性包括prop... ...
目录
(为您整理了一些要点),点击可以直达。我们可以使用一个没有参数的 v-bind来实现props,events的透传, 它会将一个对象的所有属性都作为 attribute 应用到目标元素或组件上, 这在官方文档中有着详细介绍。
其中$attrs包含组件可以透传属性的对象, 透传属性包括props,events, class,style,id等。(不包含接收组件显式声明的 props、emits以及slots )
如下,是一个封装el-input的默认可清空的的组件,由于我们已经在defineProps声明过clearable, 所以此时我们需要显性传递clearable属性
如果我们不希望透传某些属性比如class, 我们可以通过useAttrs来实现
上述封装的组件还有个缺点, 就是我们将无法使用el-input本身提供的slot,下面我们就来实现一个可以透传 slot的组件
slot可以通过下面这种方式透传的
如果透传的slot比较少,我们可以通过在封装组件内部定义并使用插槽<template v-slot:slotName><slot name="slotName" /></template>来透传插槽
如果需要透传的slot不固定或者较多,我们可以通过动态插槽名称透传
如下是一个透传的slot的el-input组件
如果需要封装组件使用了作用域插槽,我们可以通过<template v-slot:slotName="slotProps"><slot name="slotName" v-bind="slotProps"/></template>来透传作用域插槽插槽。
封装后的组件我们无法按照之前的情况调用组件实例中的属性和方法,比如BaseButton有focus方法,在封装之前我们可以通过下面这种方式调用
对于封装后的组件,由于此时button指向我们的MyButton,并不指向BaseButton的实例,所以我们需要在包装的组件中声明并暴露BaseButton事例
注意如果我们使用 <script setup>,是没办法访问实例中的属性的,详情参考vuejs.org/api/sfc-scr…
此时可以通过defineExpose显式公开ref属性
然后在父组件中我就可以通过实例链式调用封装的组件了
Vue组件二次封装的实用技巧是什么的详细内容,希望对您有所帮助,信息来源于网络。