Vue中对组件二开解决思路以及方案
更新时间：2023年04月17日 09:11:41 作者：程序不了猿
这篇文章主要介绍了Vue中对组件二开解决思路以及方案，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习吧
一、背景
在对antdv、element、自定义组件二开过程中，最困扰的问题如下:😖
- 组件那么多属性我如何传递，props? v-model?属性多的话透传有点呆。
- 组件提供的多个事件怎么调用？emit? 事件多的情况下代码冗余。
- 组件提供的方法怎么调用？ref 父子间并不能透传。但这个在react里很方便。
- solt怎么处理，一个个自己定义透传吗？作用域插槽、具名插槽很多的话怎么处理？
这个是准备去做二开UI组件的时候,遇到的几个不能一下子就能打开思路的问题；
二、解决思路以及方案
前两个问题比较简单，利用$attts和$listeners两个组件属性就能解决。
a. $attts ：继承所有的父组件属性 （除了 prop 传递的属性、class 和 style ） **，一般用在子组件的子元素上；
b $listeners：它是一个对象，里面包含了作用在这个组件上的所有监听器，你就可以配合v-on="$listeners"将所有的事件监听器指向这个组件的某个特定的子元素。（相当于子组件继承父组件的事件）
<templete>
<div>
<div>{{ text }}</div>
<el-input v-bind="$attts" v-on="$listeners" placeholder="请输入内容"></el-input>
</div>
</templete>
<script>
export default {
props:{
text:String,
}
mounted(){
console.log(this.$attrs)
}
}
</script>
<templete>
<div>
<child type="text" v-model="input" text @blur="onBlur"></div>
</div>
</templete>
<script>
export default {
data() {
return {
input: '',
text:'子组件的props'
}
},
methods:{
onBlur(){
// ...
}
}
}
</script>
关于调用子组件中的方法（子组件拿不到父组件的ref），网上也看到了很多方案，从便捷度来说，我个人更倾向于将方法直接绑定在组件实例上。
tips:** 善用object中的entries**,返回Array<[key:string, value:any?]>类型的二维数组
<templete>
<div>
<child ref="childRef" type="text" v-model="input" text @blur="onBlur"></div>
</div>
</templete>
<script>
export default {
data() {
return {
input: '',
text:'子组件的props'
}
},
mounted(){
console.log(this.$ref.childRef)
},
methods:{
onBlur(){
// ...
}
}
}
</script>
<templete>
<div>
<div>{{ text }}</div>
<el-input ref="inpRef" v-bind="$attts" v-on="$listeners" placeholder="请输入内容"></el-input>
</div>
</templete>
<script>
export default {
props:{
text:String,
}
mounted(){
console.log(this.$attrs)
// 绑定ref到组件实例上
const entries = Object.entries(this.$ref.inpRef)
for(const [key, value] of entries){
this[key] = value;
}
}
</script>
插槽主要用的$slots，这边对作用域插槽数据做了兜底，不然会报错；
tips: 在vue模版中遍历对象**，会拿到* value、name*两个值
<templete>
<div>
<child ref="childRef" type="text" v-model="input" text @blur="onBlur">
<template slot="prepend">Http://</template>
</child>
</div>
</templete>
<script>
export default {
data() {
return {
input: '',
text:'子组件的props'
}
},
mounted(){
console.log(this.$ref.childRef)
},
methods:{
onBlur(){
// ...
}
}
}
</script>
<templete>
<div>
<div>{{ text }}</div>
<el-input ref="inpRef" v-bind="$attts" v-on="$listeners" placeholder="请输入内容">
<templete v-for="(value, name) in $slot" #[name]="slotData">
<slot :name="name" v-bind = "slotData || {}"></slot>
</templete>
</el-input>
</div>
</templete>
<script>
export default {
props:{
text:String,
}
mounted(){
console.log(this.$attrs)
// 绑定ref到组件示例上
const entries = Object.entries(this.$ref.inpRef)
for(const [key, value] of entries){
this[key] = value;
}
}
</script>
到此这篇关于Vue中对组件二开解决思路以及方案的文章就介绍到这了,更多相关Vue组件二开内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
浅谈ElementUI el-select 数据过多解决办法
下拉框的选项很多，上万个选项甚至更多，这个时候如果全部把数据放到下拉框中渲染出来，浏览器会卡死，体验会特别不好，本文主要介绍了ElementUI el-select 数据过多解决办法，感兴趣的可以了解一下2021-09-09
这篇文章主要介绍了解决在el-dialog中无法正确获取DOM的问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2024-03-03
vue通过辅助函数mapState、mapActions、mapMutations，把vuex.store中的属性映射到vue实例身上，这样在vue实例中就能访问vuex.store中的属性了，对于操作vuex.store就很方便了，本文具体的介绍下这些辅助函数的使用方法2021-06-06
下面小编就为大家分享一篇vue2.0路由切换后页面滚动位置不变BUG的解决方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-03-03
这篇文章主要介绍了vue如何通过id从列表页跳转到对应的详情页 ,需要的朋友可以参考下2018-05-05
在vue中实现在线预览PDF文件我们可以使用vue-pdf来实现,下面这篇文章主要介绍了Vue中使用vue-pdf嵌入和展示PDF文件的相关资料,文中通过代码介绍的非常详细,需要的朋友可以参考下2024-10-10
在Vue应用中,结合前端和后端接口请求实现动态路由,可根据用户权限动态生成路由,提高安全性与灵活性,本文就来介绍一下前端+接口请求实现vue动态路由,感兴趣的可以了解一下2024-09-09
计算属性是基于它们的依赖进行缓存的,只有在它的相关依赖发生改变时才会重新求值,而watch则是一个更为通用的监听器,它可以在数据变化时执行异步操作或开销较大的操作2025-01-01
这篇文章主要介绍了vue中同步方法的实现，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2023-05-05
本篇文章主要介绍了Vue.js上下滚动加载组件的实例代码，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-07-07
最新评论