这篇文章主要介绍“Vue中对组件二开的方法是什么”的相关知识,小编通过实际案例向大家展示操作过程,操作方法简单快捷,实用性强,希望这篇“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中对组件二开的方法是什么”的内容就介绍到这里了,感谢大家的阅读。如果想了解更多行业相关的知识,可以关注编程网行业资讯频道,小编每天都会为大家更新不同的知识点。