Shulou(Shulou.com)06/01 Report--

In this article Xiaobian introduces in detail for you "how to use the class class derived from export default in vue", the content is detailed, the steps are clear, and the details are handled properly. I hope that this article "how to use the class class derived from export default in vue" can help you solve your doubts.

Export class classes using export default

First we need to create a class and export

Class win {getProcessInfo () {return 233;}} export default new win (); / / uses the export default method and is instantiated when it is exported

Reference in the vue file

. Here is template.import win from "here is the path"; export default {data () {return {};}, methods: {getProcessInfoFn () {console.log (win.getProcessInfo ()); / / 233}; various export forms of export

Introduction supported by both require:node and es6

Export/import: only exports supported by es6 are introduced

Module.exports/exports: exports supported only by node

1. When there are multiple export in the file / / module.ts file 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 file import {Component,Vue} from 'vue-property-decorator';import {Modulea,Moduleb,Modulec} from' @ / assets/module.ts'/* the second way import * as module from'@ / assets/module.ts'*/@Componentexport default class ceshi extends Vue {private mounted () {new Modulea ("module A"); new Moduleb ("module B") New Modulec ("module C"); / * the second way to call new module.Modulea ("module A"); new module.Moduleb ("module B"); new module.Modulec ("module C"); * /}} 2, when using export default / / module.ts file 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);} import {Component,Vue} from 'vue-property-decorator' Import module from'@ / assets/module.ts'@Componentexport default class ceshi extends Vue {private mounted () {let modulea = new module ("module A"); modulea.newB ("module B"); modulea.newC ("module C");} 3, single export and do not use default

The citation method is the same as in the first case.

/ / 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, when a single export uses default / / module.ts file 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 file import {Component,Vue} from 'vue-property-decorator';import module from' @ / assets/module.ts'@Componentexport default class ceshi extends Vue {private mounted () {new module.Modulea ("module A"); new module.Moduleb ("module B") New module.Modulec ("module C");}} 5. When using module.exports, / / module.ts file 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 file import {Component,Vue} from 'vue-property-decorator';let module = require (' @ / assets/module.ts'); @ Componentexport default class ceshi extends Vue {private mounted () {new module.Modulea ("module A") New module.Moduleb ("module B"); new module.Modulec ("module C");}} 6. Exports//module.ts file 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 file import {Component,Vue} from 'vue-property-decorator' Let module = require ('@ / assets/module.ts'); @ Componentexport default class ceshi extends Vue {private mounted () {new module.ex.Modulea ("module A"); new module.ex.Moduleb ("module B"); new module.ex.Modulec ("module C");}} 7, exports the second way to write / / module.ts file 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 import {Component,Vue} from 'vue-property-decorator';let module = require (' @ / assets/module.ts'); @ Componentexport default class ceshi extends Vue {private mounted () {new module.Modulea ("module A"); new module.Moduleb ("module B"); new module.Modulec ("module C") }} 8. Mixed export / / default.jsfunction add (Azov b) {return a + b;} function dist (Azov b) {return a-b;} export {dist} export default add / / index.jsimport add, {dist} from ". / default.js" read here, this article "how to use class classes exported by export default in vue" has been introduced. If you want to master the knowledge points of this article, you still need to practice and use it before you can understand it. If you want to know more about related articles, welcome to follow the industry information channel.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.