vue 扩展现有组件的操作

1. 使用vue.mixin全局混入

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

混入的主要用途

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

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

Mixins
  

  

    
num:{{ num }}
    

      增加数量
    

  
  

具名插槽

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

  
   

  
aaa
  
bbb
  
ccc
   
   

  
111
  
222
  
333
   
  

写法二、JSX(比较麻烦)

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

1、导入继承

import {Select} from 'element-ui';

const myElSelect = {
 extends: Select
}

2、 重写render

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

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

render()
{
  const tagContent = () => {
   if (this.collapseTags && this.selected.length) {
    const tag0 = (
      this.deleteTag(e, this.selected[0])}
      disable-transitions={true}>
      {this.selected[0].currentLabel}
     
    );
    const tag1 = (
     
      + {this.selected.length - 1}
     
    );

    if (this.selected.length > 1) {
     return (
      
       {tag0}
       {tag1}
      
     );
    }
    return (
     
      {tag0}
     
    );
   }
  };
  const emptyText = () => {
   if (this.emptyText && (!this.allowCreate || this.loading || (this.allowCreate && this.options.length === 0))) {
    return (
     
{this.emptyText}
    );
   }
  };
  const selectOption = () => {
   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';

const myElSelect = {
 extends: Select,
 methods: {
  deleteTag(event, tag, tagIndex) {
   // *****略
  },
 },
 render() {
  return (
   
例子
  );
 }
};
export default myElSelect;

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