好资源导航 » 文章资讯 » vue 扩展现有组件的操作

vue 扩展现有组件的操作

2023-07-18 19:48:04 192

1.使用vue.mixin全局混入

混入(mixins)是一种分发Vue组件中可复用功能的非常灵活的方式。混入对象可以包含任意组件选项。当组件使用混入对象时，所有混入对象的选项将被混入该组件本身的选项。mixins选项接受一个混合对象的数组。

混入的主要用途

1、在你已经写好了构造器后，需要增加方法或者临时的活动时使用的方法，这时用混入会减少源代码的污染。

2、很多地方都会用到的公用方法，用混入的方法可以减少代码量，实现代码重用。

Mixins


num:{{num}}

增加数量

varaddLog={//额外临时加入时，用于显示日志 updated:function(){ console.log("数据发生变化,变化成"+this.num+"."); } } Vue.mixin({//全局注册一个混入，影响注册之后所有创建的每个Vue实例 updated:function(){ console.log("我是全局的混入") } }) varapp=newVue({ el:'#app', data:{ num:1 }, methods:{ add:function(){ this.num++; } }, updated(){ console.log("我是原生的update") }, mixins:[addLog]//混入 })

输出的结果

mixins的调用顺序

从执行的先后顺序来说，混入对象的钩子将在组件自身钩子之前调用，如果遇到全局混入(Vue.mixin)，全局混入的执行顺序要前于混入和组件里的方法。

2.使用extends扩展

extends选项允许声明扩展另一个组件，而无需使用Vue.extend。

通过外部增加对象的形式，对构造器进行扩展。它和混入mixins非常的类似。只不过接收的参数是简单的选项对象或构造函数,所以extends只能单次扩展一个组件。

varbbb={
updated(){
console.log("我是被扩展出来的");
},
methods:{
add:function(){//跟原生的方法冲突，取原生的方法，这点跟混入一样
console.log('我是被扩展出来的add方法！');
this.num++;
}
}
};
varapp=newVue({
el:'#app',
data:{
num:1
},
methods:{
add:function(){
console.log('我是原生add方法');
this.num++;
}
},
updated(){
console.log("我是扩展出来的");
},
extends:bbb//接收对象和函数
})

结果

执行的先后顺序和mixins一样，另外扩展的方法与原生的冲突时，扩展的方法不生效，这点跟混入一样

psextends和mixins优先级比较

相对于mixins,extends触发的优先级更高

3.加slot扩展

.默认插槽和匿名插槽

slot用来获取组件中的原内容，此方式用于父组件向子组件传递“标签数据”。有的时候为插槽提供默认的内容是很有用的,例如，一个组件可能希望这个按钮的默认内容是“如果没有原内容，则显示该内容”，但是同时允许用户覆写为别的内容。

welcometoxiamen

如果没有原内容，则显示该内容//默认插槽

具名插槽

有些时候我们需要多个插槽,元素有一个特殊的特性：name。这个特性可以用来定义额外的插槽：




aaa
bbb
ccc


111
222
333

welcometoxiamen

写法二、JSX(比较麻烦)

需要手动将Vuetemplate转为jsx写法，无法使用事件修饰符，部分指令等等，改动比较大

1、导入继承

import{Select}from'element-ui';

constmyElSelect={
extends:Select
}

2、重写render

Vuetemplate最终编译之后也是生成render函数，这里覆盖render函数，

生成自定义内容。此处的意义只是为了记录以便于方便我用render函数时的jsx写法

render()
{
consttagContent=()=>{
if(this.collapseTags&&this.selected.length){
consttag0=(
this.deleteTag(e,this.selected[0])}
disable-transitions={true}>
{this.selected[0].currentLabel}

);
consttag1=(

+{this.selected.length-1}

);

if(this.selected.length>1){
return(

{tag0}
{tag1}

);
}
return(

{tag0}

);
}
};
constemptyText=()=>{
if(this.emptyText&&(!this.allowCreate||this.loading||(this.allowCreate&&this.options.length===0))){
return(
{this.emptyText}
);
}
};
constselectOption=()=>{
return(


0&&!this.loading}>
{this.showNewOption?(


):null}
{
this.$slots.default
}

{emptyText()}


);
};
return(


{tagContent()}

{this.selected.map((item,index)=>{
return(
this.deleteTag(e,item,index)}
disable-transitions={false}>
{item.currentLabel}

);
})}



this.handleIconClick}/>

{selectOption()}

);
}

3、重写method里的deleteTag方法

4、结果

import{Select}from'element-ui';

constmyElSelect={
extends:Select,
methods:{
deleteTag(event,tag,tagIndex){
//*****略
},
},
render(){
return(
例子
);
}
};
exportdefaultmyElSelect;

以上这篇vue扩展现有组件的操作就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持毛票票。

声明：本文内容来源于网络，版权归原作者所有，内容由互联网用户自发贡献自行上传，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任。如果您发现有涉嫌版权的内容，欢迎发送邮件至：czq8825#qq.com（发邮件时，请将#更换为@）进行举报，并提供相关证据，一经查实，本站将立刻删除涉嫌侵权内容。

返回顶部
3162201930
czq8825@qq.com

vue 扩展现有组件的操作

Mixins

welcometoxiamen

welcometoxiamen

热门推荐

随机推荐