【vue】mixin混入的使用

1.全局mixin

对mixin的使用我其实很浑浊，不太清楚，但我一般喜欢将mixin作为vue option API的公共method来使用，即将mixin全局引入，使没有组件中的methods选项都拥有该方法，比如使用ant design vue框架时没有表格拖拽功能，那么可以通过mixin混入，使每个页面都有

这个方法

//mixin/common.js
/**
 * 全局mixins
 */
export default {
    methods:{
        filterColumns(refs,columns){
            console.log(111);
        },
        aaa(){},
        bbb(){},
        ... 
    }
};

//这些方法都作为组件的公共方法去使用

 作为插件使用

//mixins/index.js
import common from '@/mixin/common';

export default {
  install(Vue) {
    Vue.mixin(common)
  }
}

在main.js中引入

import mixins from './mixin';

Vue.use(mixins);

 

2.局部mixin

 某些组件可能使用到的方法，比如下载文件的方法，不是所有组件都用到，总有几个页面有这个功能，那么可以做成局部的公共方法，单独引入需要的组件

  该示例多个方法写在一个文件中，使用时，引入其中一个方法即可

/**
 * 局部mixins
 */


/**
  * 根据id查询文件
  * @param { 文件id } id 
*/ 
export const fileDetail = {
    methods:{
        getFileDetailById(id){
            return api.post(api.fileSystem.getById,{id}).then(res => {
                if(res.isSuccess){
                    return res.data;
                }
            });
        }
    }
};


/**
 * 下载文件
 * @param { 文件url } url 
 * @param { 文件名 } fileName 
 */
export const fileDownload = {
    methods:{
        download(url,fileName){
            fetch(url).then(res => res.blob()).then(blob => { 
                let eleLink = document.createElement("a");
                eleLink.style.display = "none";
                eleLink.target = "_blank";
                eleLink.setAttribute('download',fileName);
                eleLink.href = URL.createObjectURL(blob);
                document.body.appendChild(eleLink);
                eleLink.click();
                URL.revokeObjectURL(eleLink.href);
                document.body.removeChild(eleLink);
            })
        }
    }
};

 

组件内引入

//需要哪个方法引入哪个方法
import { fileDetail,fileDownload } from '@/mixin/others';

export default {
    //多个方法数组呈现
    mixins: [ fileDetail,fileDownload ]
}