在vue中使用export|在vue中使用export default导出的class类方式在vue中使用exportdefault导出的

使用export default导出class类
关于export的多种导出形式

1、文件中存在多个export的时候
2、使用export default时
3、单个export且不使用default时
4、单个export使用default时
5、使用module.exports时
6、exports
7、exports第二种写法
8、混合导出

使用export default导出class类首先我们要创建一个类并导出

class win {getProcessInfo() {return 233; }}export default new win(); //用的是export default方法，并且导出的时候就已经实例化了

在vue文件中引用

.......这里是template........

关于export的多种导出形式

require：node和es6都支持的引入
export/import：只有es6 支持的导出引入
module.exports/exports：只有 node 支持的导出

【在vue中使用export|在vue中使用export default导出的class类方式】
1、文件中存在多个export的时候

//module.ts文件export class Modulea{constructor(public params:string){console.log(params); }}export class Moduleb{constructor(public params:string){console.log(params); }}export class Modulec{constructor(public params:string){console.log(params); }}

//ceshi.vue文件

2、使用export default时

//module.ts文件export default class Modulea{constructor(public params:string){console.log(params); }newB(params:string){new Moduleb(params); }newC(params:string){new Modulec(params)}}class Moduleb{constructor(public params:string){console.log(params); }}class Modulec{constructor(public params:string){console.log(params); }}

3、单个export且不使用default时
引用方式同第一种情况

//module.tsclass Modulea{constructor(public params:string){console.log(params); }newB(params:string){new Moduleb(params); }newC(params:string){new Modulec(params)}}class Moduleb{constructor(public params:string){console.log(params); }}class Modulec{constructor(public params:string){console.log(params); }}export {Modulea,Moduleb,Modulec}

4、单个export使用default时

//module.ts文件class Modulea{constructor(public params:string){console.log(params); }newB(params:string){new Moduleb(params); }newC(params:string){new Modulec(params)}}class Moduleb{constructor(public params:string){console.log(params); }}class Modulec{constructor(public params:string){console.log(params); }}export default {Modulea,Moduleb,Modulec}

//ceshi.vue文件

5、使用module.exports时

//module.ts文件class Modulea{constructor(public params:string){console.log(params); }newB(params:string){new Moduleb(params); }newC(params:string){new Modulec(params)}}class Moduleb{constructor(public params:string){console.log(params); }}class Modulec{constructor(public params:string){console.log(params); }}module.exports = {Modulea,Moduleb,Modulec}

//ceshi.vue文件

6、exports

//module.ts文件class Modulea{constructor(public params:string){console.log(params); }newB(params:string){new Moduleb(params); }newC(params:string){new Modulec(params)}}class Moduleb{constructor(public params:string){console.log(params); }}class Modulec{constructor(public params:string){console.log(params); }}exports.ex= {Modulea,Moduleb,Modulec}

//ceshi.vue文件

7、exports第二种写法

//module.ts文件class Modulea{constructor(public params:string){console.log(params); }newB(params:string){new Moduleb(params); }newC(params:string){new Modulec(params)}}class Moduleb{constructor(public params:string){console.log(params); }}class Modulec{constructor(public params:string){console.log(params); }}exports.Modulea = Moduleaexports.Moduleb = Modulebexports.Modulec = Modulec

8、混合导出

//default.jsfunction add(a,b){return a + b; } function dist(a,b){return a - b; }export { dist }export default add; //index.jsimport add,{dist} from "./default.js"

以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。