vue封装一个组件需要哪些步骤,vue自己封装组件 vue项目中
本文主要介绍前端框架封装Vue第三方组件的三个技巧实例的详细讲解。有需要的朋友可以借鉴一下，希望能有所帮助。祝大家进步很大，早日升职加薪。
目录
简介一、使用第三方组件的属性二。使用第三方组件的自定义事件。使用第三方组件的槽。使用第三方组件的方法
引言
在封装第三方组件时，我们经常会遇到一个问题，如何通过封装的组件使用第三方组件的Attributes(属性)、Events(自定义事件)、Methods(方法)、Slots(槽位)。
当然，这个问题并不难解决。用普通方法解决很难避免繁琐重复的工作，封装的组件代码可读性不高。
本专栏将介绍使用第三方组件Attributes(属性)、Events(自定义事件)和Slots(插槽)的三个技巧，但使用第三方组件Methods(方法)的技巧需要优化。
一、使用第三方组件的属性
封装了elementUI的el-input输入框组件称为myInput。如果想给myInput组件添加一个disabled属性来禁用输入框，怎么实现呢？学生通常会这样做。
//myInput.vue
模板
差异
El-input v-model= inputVal :disabled= disabled /El-input
/div
/模板
脚本
导出默认值{
道具：{
值：{
类型：字符串，
默认值： ，
},
已禁用：{
类型：布尔型，
默认值：false
}
},
计算值：{
输入值：{
get() {
返回this.value
},
设置(值){
这个。$emit(input ，val)；
}
}
}
}
/脚本
过了一会儿，我们必须将el-input组件的其他属性添加到myInput组件中。el-input组件的多属性总共有27个，那么应该怎么做呢？我们是不是用prop把它们一个一个传进去，不仅繁琐而且可读性差。您可以使用$attrs一步到位。我们先来看看attrs的官方定义。
$attrs:包含父范围中未被识别(和获取)为属性的属性绑定(除了类和样式)。当一个组件没有声明任何属性时，它将包含所有的父作用域绑定(除了类和样式)，并可以通过v-bind=$attrs 传递到内部组件中
//myInput.vue
模板
差异
El-input v-model= input v-bind= $ attrs /El-input
/div
/模板
这还不够。您必须将inheritAttrs选项设置为false。为什么？看看inheritAttrs选项的官方定义就知道了。
默认情况下，不被识别为props的父范围的属性绑定将被“回滚”,并作为普通的HTML属性应用于子组件的根元素。当编写包装目标元素或另一个组件的组件时，这可能并不总是符合预期的行为。
通过将inheritAttrs设置为false，这些默认行为将被移除。这些属性可以通过$attrs生效，且可以通过v-bind显式绑定到非根元素。注意：该选项不影响类和样式绑定。
简单地说，将inheritAttrs设置为false，这样可以避免为myInput组件设置的属性被添加到myInput组件的根元素div中。
//myInput.vue
模板
差异
El-input v-model= input v-bind= $ attrs /El-input
/div
/模板
脚本
导出默认值{
inheritantrs:false，
道具：{
值：{
类型：字符串，
默认值： ，
},
},
计算值：{
输入值：{
get() {
返回this.value
},
设置(值){
这个。$emit(input ，val)；
}
}
}
}
/脚本
这样，el-input组件的属性就可以直接用在myInput组件上，不管后续的el-input组件添加了多少属性。
二、使用第三方组件的自定义事件
如果在myIpput组件上使用el-input组件上的自定义事件会怎么样？可能你的第一反应是这个。$emit。
//myInput.vue
模板
差异
El-input v-model= input v-bind= $ attrs @ blur= blur /El-input
/div
/模板
脚本
导出默认值{
inheritantrs:false，
道具：{
值：{
类型：字符串，
默认值： ，
},
},
计算值：{
输入值：{
get() {
返回this.value
},
设置(值){
这个。$emit(input ，val)；
}
}
},
方法：{
模糊(){
这个。$emit(模糊)
}
}
}
/脚本
my input v-model= value @ blur= handle blur /my input
El-input组件有四个自定义事件，并不算多。如果遇到更多带有自定义事件的第三方组件，该怎么办？是不是一个一个加，会增加一堆不必要的方法？事实上，您可以一步到位地使用$listeners。我们先来看看$listeners的官方定义。
$listeners:包含父作用域中的v-on事件侦听器(没有。原生修饰符)。可以通过v-on=$listeners 传入内部组件。
//myInput.vue
模板
差异
El-input v-model= input v-bind= $ attrs v-on= $ listeners /El-input
/div
/模板
然后将v-on=$listeners 添加到myInput组件中的el-input组件，就可以在myInput组件上使用el-input组件定义的事件了。
三、使用第三方组件的插槽
如果在myIpput组件上使用el-input组件上定义的插槽会怎么样？做这件事没有多少技巧。多少个插槽是第三方组件定义的，封装的时候要露出插槽标签。例如，el-input组件中的前缀槽是公开的，代码如下：
//myInput.vue
模板
差异
El-input v-model= input v-bind= $ attrs @ blur= blur
模板#前置
slot name=prepend/slot
/模板
/el-input
/div
/模板
四、使用第三方组件的方法
使用ref，首先向myInput组件中的el-input组件添加一个ref=elInput 属性，
//myInput.vue
模板
差异
el输入ref=输入/el输入
/div
/模板
脚本
导出默认值{
已安装(){
this.elInput=this。$ refs.elInput
}
}
/脚本
这里应该注意安装父子组件的执行时间，因为一般来说，el-input组件是全局引入的，并且这些组件是同步引入的。此时，el-input组件的安装将在myInput组件的安装之前执行，因此。在myInput组件的mounted中，可以将refs.elInput分配给myInput组件的this的属性。
myInput组件使用el-input组件有两种方式，与myInput组件的引入有关。
如果同步引入myInput组件
模板
差异
myInput ref=myInput/myInput
/div
/模板
脚本
从“”导入myInput。/my input . vue ；
导出默认值{
data() {
返回{
}
},
组件：{
我的输入，
},
已安装(){
//调用el输入组件的focus方法
这个。$ refs . my input . elinput . focus()；
}
}
/脚本
如果myInput组件是异步引入的
模板
差异
myInput ref=myInput/myInput
/div
/模板
脚本
导出默认值{
data() {
返回{
}
},
组件：{
myInput: ()=import(。/my input . vue’)
},
已安装(){
//调用el输入组件的focus方法
setTimeout(()={
这个。$ refs . my input . elinput . focus()；
})
}
}
/脚本
以上就是前端框架封装Vue第三方组件的三个技术细节。更多关于封装Vue第三方组件的信息，请关注我们的其他相关文章！
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。