使用export default导出class类
首先我们要创建一个类并导出
class win { getProcessInfo() { return 233; } } export default new win(); //用的是export default方法,并且导出的时候就已经实例化了
在vue文件中引用
..... ..这里是template... ..... <script> import win from "这里是路径"; export default { data() { return {}; }, methods: { getProcessInfoFn() { console.log(win.getProcessInfo()); //233 } } }; </script>
关于export的多种导出形式
require
:node和es6都支持的引入export
/import
:只有es6 支持的导出引入module.exports
/exports
:只有 node 支持的导出
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文件 <template> <div class='ceshi'> </div> </template> <script lang='ts'> import { Component,Vue } from 'vue-property-decorator'; import {Modulea,Moduleb,Modulec} from '@/assets/module.ts' /* 第二种方式 import * as module from '@/assets/module.ts' */ @Component export default class ceshi extends Vue { private mounted(){ new Modulea("模块A"); new Moduleb("模块B"); new Modulec("模块C"); /* 第二种方式调用 new module.Modulea("模块A"); new module.Moduleb("模块B"); new module.Modulec("模块C"); */ } } </script> <style lang='less' scoped> </style>
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); } }
<template> <div class='ceshi'> </div> </template> <script lang='ts'> import { Component,Vue } from 'vue-property-decorator'; import module from '@/assets/module.ts' @Component export default class ceshi extends Vue { private mounted(){ let modulea = new module("模块A"); modulea.newB("模块B"); modulea.newC("模块C"); } } </script> <style lang='less' scoped> </style>
3、单个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 { 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文件 <template> <div class='ceshi'> </div> </template> <script lang='ts'> import { Component,Vue } from 'vue-property-decorator'; import module from '@/assets/module.ts' @Component export default class ceshi extends Vue { private mounted(){ new module.Modulea("模块A"); new module.Moduleb("模块B"); new module.Modulec("模块C"); } } </script> <style lang='less' scoped> </style>
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文件 <template> <div class='ceshi'> </div> </template> <script lang='ts'> import { Component,Vue } from 'vue-property-decorator'; let module = require('@/assets/module.ts'); @Component export default class ceshi extends Vue { private mounted(){ new module.Modulea("模块A"); new module.Moduleb("模块B"); new module.Modulec("模块C"); } } </script> <style lang='less' scoped> </style>
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文件 <template> <div class='ceshi'> </div> </template> <script lang='ts'> import { Component,Vue } from 'vue-property-decorator'; let module = require('@/assets/module.ts'); @Component export default class ceshi extends Vue { private mounted(){ new module.ex.Modulea("模块A"); new module.ex.Moduleb("模块B"); new module.ex.Modulec("模块C"); } } </script> <style lang='less' scoped> </style>
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 = Modulea exports.Moduleb = Moduleb exports.Modulec = Modulec
<template> <div class='ceshi'> </div> </template> <script lang='ts'> import { Component,Vue } from 'vue-property-decorator'; let module = require('@/assets/module.ts'); @Component export default class ceshi extends Vue { private mounted(){ new module.Modulea("模块A"); new module.Moduleb("模块B"); new module.Modulec("模块C"); } } </script> <style lang='less' scoped> </style>
8、混合导出
//default.js function add(a,b){ return a + b; } function dist(a,b){ return a - b; } export { dist } export default add; //index.js import add,{dist} from "./default.js"
以上为个人经验,希望能给大家一个参考,也希望大家多多支持阿兔在线工具。