请说下封装 vue 组件的过程,vue提供了内置的过渡封装组件
我们在做项目的时候，经常会遇到组件的功能不能满足业务需求的情况。这时，我们需要重新封装原来的组件。下面这篇文章主要介绍一些关于Vue组件重封装的实用技巧，有需要的朋友可以参考一下。
目录
前言透明属性透明插槽公共插槽动态插槽名称范围插槽封装组件问题组件实例属性和方法调用摘要
前言
在开发Vue项目时，我们一般使用第三方UI组件库进行开发，如Element-Plus、@ arco-design/Web-Vue、naive-UI等。但是这些组件提供的接口不一定能满足我们的需求。这时，我们可以通过对组件库的组件进行二次打包来满足我们的特殊需求。
封装组件的一个很大的原则是，我们要尽量保留原来组件的接口。除了我们需要封装的功能外，不要改变原有组件的接口，即保持原有组件提供的接口如道具、事件、槽位等不变。
为了实现这个原则，我们需要新组件的接口和旧组件的接口一一对应。当然，我们可以通过在新组件中逐个声明相应的接口来实现(或者只实现我们目前需要使用的接口)。然而这种方法虽然简单，却显得极其繁琐。有没有办法实现道具，事件，槽位的自动传送？
透传 Attribute
我们可以使用一个没有参数的v-bind来实现道具、事件的透明传输。它会将一个对象的所有属性作为属性应用到目标元素或组件，这在正式文档中有详细说明。
BaseButton v-bind=$attrs/
其中，$attrs包含具有组件透明属性的对象，透明属性包括道具、事件、类、样式、id等。(不包括接收组件明确声明的props、emissions和emissions)
下面是封装el-input的默认组件，可以清空。由于我们已经在defineProps中声明了clearable，所以此时需要显式传递clearable属性。
模板
div class=我的输入
{{ label }}
El-input v-bind= $ attrs :clearable= clearable /El-input
/div
/模板
脚本设置
defineProps({
标签:字符串，
可清除：{
类型：布尔型，
默认值：true，
},
});
/脚本
如果我们不想传递一些属性，比如类，我们可以通过使用useAttrs来实现。
模板
div class=我的输入
{{ label }}
El-input v-bind= filtered attrs :clearable= clearable /El-input
/div
/模板
脚本设置
从“Vue”导入{ computed，use attrs }；
defineProps({
标签:字符串，
可清除：{
类型：布尔型，
默认值：true，
},
});
const attrs=use attrs()；
const filtered attrs=computed(()={
返回{.attrs，class:undefined }；
});
/脚本
以上封装的组件还有一个缺点，就是我们将无法使用el-input本身提供的插槽。让我们实现一个可以透明地传输插槽的组件。
透传 slot
时隙可以通过以下方式传输
！-在组件中创建一个具有相应名称的新插槽-
模板#插槽名称
！-使用插槽中具有相应名称的插槽-
插槽名称=插槽名称/
/模板
普通slot
如果透明槽很少，我们可以在包组件内部定义并使用槽模板v-slot:slotname slot name= slot name //template来透明传输槽。
模板#插槽名称
插槽名称=插槽名称/
/模板
动态插槽名
如果需要透明传输的槽不是固定的或者更多，我们可以通过动态槽名来透明传输。
$slots 中的模板#[slotName] v-for=(slot，slotName
slot :name=slotName /
/模板
下面是slot的一个透明el输入组件。
模板
div class=我的输入
{{ label }}
El-input v-bind= $ attrs :clearable= clearable
$slots 中的模板#[slotName] v-for=(slot，slotName
slot :name=slotName /
/模板
/el-input
/div
/模板
脚本设置
defineProps({
标签:字符串，
可清除：{
类型：布尔型，
默认值：true，
},
});
/脚本
作用域插槽
如果要封装的组件使用了作用域槽，我们可以通过模板v-slot透明地传输作用域槽slot:slot name= slot props slot name= slot name v-bind= slot props //template。
模板#[slot name]= slot props v-for=(slot，slotName) in $slots
slot:name= slot name v-bind= slot props /
/模板
封装组件存在的问题
组件实例属性和方法的调用
封装后，我们就不能按照以前的情况调用组件实例中的属性和方法了。比如BaseButton有focus方法，我们可以在封装前用下面的方式调用。
//调用BaseButton的组件的父组件
//BaseButton ref=button
const button=ref()；
按钮.值.焦点()
对于打包的组件，由于此时按钮指向我们的MyButton，而不是BaseButton的实例，所以我们需要在打包的组件中声明并公开BaseButton的实例。
//我们封装的组件
//MyButton。某视频剪辑软件
//BaseButton ref=button
const button=ref()；
注意，如果我们使用脚本设置，就无法访问实例中的属性。详情请参考vuejs.org/api/sfc-scr…
这时可以通过defineExpose显式公开ref属性。
//我们封装的组件
//MyButton。某视频剪辑软件
//BaseButton ref=button
const button=ref()；
defineExpose({
按钮
});
然后在父组件中，我可以通过实例链调用封装的组件。
//MyButton ref=button
const button=ref()；
按钮.值.按钮.焦点()
总结
关于Vue组件二次封装的一些实用技巧这篇文章就到这里了。更多Vue组件二次包装的相关内容，请搜索我们之前的文章或者继续浏览下面的相关文章。希望大家以后能多多支持我们！
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。