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()}
   
  );
 }

import {Select} from 'element-ui';

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