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 ]
}