Export class class using export default
First we need to create a class and export it
class win {
getProcessInfo() {
return 233;
}
}
export default new win(); //Usedexport defaultmethod，And it was instantiated when exportingReference in vue file
.....
..here it istemplate...
.....
<script>
import win from "This is the path";
export default {
data() {
return {};
},
methods: {
getProcessInfoFn() {
(()); //233
}
}
};
</script>About exports
-
require: Introduced by both node and es6 -
export/import: Only es6 supports export imports -
/exports: Exports supported by node only
1. When multiple exports exist in the file
//documentexport class Modulea{
constructor(public params:string){
(params);
}
}
export class Moduleb{
constructor(public params:string){
(params);
}
}
export class Modulec{
constructor(public params:string){
(params);
}
}//document<template>
<div class='ceshi'>
</div>
</template>
<script lang='ts'>
import { Component,Vue } from 'vue-property-decorator';
import {Modulea,Moduleb,Modulec} from '@/assets/'
/*
The second way
import * as module from '@/assets/'
*/
@Component
export 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 A");
new ("Module B");
new ("Module C");
*/
}
}
</script>
<style lang='less' scoped>
</style>2. When using export default
//documentexport default class Modulea{
constructor(public params:string){
(params);
}
newB(params:string){
new Moduleb(params);
}
newC(params:string){
new Modulec(params)
}
}
class Moduleb{
constructor(public params:string){
(params);
}
}
class Modulec{
constructor(public params:string){
(params);
}
}<template>
<div class='ceshi'>
</div>
</template>
<script lang='ts'>
import { Component,Vue } from 'vue-property-decorator';
import module from '@/assets/'
@Component
export default class ceshi extends Vue {
private mounted(){
let modulea = new module("Module A");
("Module B");
("Module C");
}
}
</script>
<style lang='less' scoped>
</style>3. When a single export is not used
Quotation method is the same as the first case
//
class Modulea{
constructor(public params:string){
(params);
}
newB(params:string){
new Moduleb(params);
}
newC(params:string){
new Modulec(params)
}
}
class Moduleb{
constructor(public params:string){
(params);
}
}
class Modulec{
constructor(public params:string){
(params);
}
}
export {
Modulea,Moduleb,Modulec
}4. When a single export uses default
//documentclass Modulea{
constructor(public params:string){
(params);
}
newB(params:string){
new Moduleb(params);
}
newC(params:string){
new Modulec(params)
}
}
class Moduleb{
constructor(public params:string){
(params);
}
}
class Modulec{
constructor(public params:string){
(params);
}
}
export default {
Modulea,Moduleb,Modulec
}//document<template>
<div class='ceshi'>
</div>
</template>
<script lang='ts'>
import { Component,Vue } from 'vue-property-decorator';
import module from '@/assets/'
@Component
export default class ceshi extends Vue {
private mounted(){
new ("Module A");
new ("Module B");
new ("Module C");
}
}
</script>
<style lang='less' scoped>
</style>5. When using it
//documentclass Modulea{
constructor(public params:string){
(params);
}
newB(params:string){
new Moduleb(params);
}
newC(params:string){
new Modulec(params)
}
}
class Moduleb{
constructor(public params:string){
(params);
}
}
class Modulec{
constructor(public params:string){
(params);
}
}
= {
Modulea,Moduleb,Modulec
}//document<template>
<div class='ceshi'>
</div>
</template>
<script lang='ts'>
import { Component,Vue } from 'vue-property-decorator';
let module = require('@/assets/');
@Component
export default class ceshi extends Vue {
private mounted(){
new ("Module A");
new ("Module B");
new ("Module C");
}
}
</script>
<style lang='less' scoped>
</style>6、exports
//documentclass Modulea{
constructor(public params:string){
(params);
}
newB(params:string){
new Moduleb(params);
}
newC(params:string){
new Modulec(params)
}
}
class Moduleb{
constructor(public params:string){
(params);
}
}
class Modulec{
constructor(public params:string){
(params);
}
}
= {
Modulea,Moduleb,Modulec
}//document<template>
<div class='ceshi'>
</div>
</template>
<script lang='ts'>
import { Component,Vue } from 'vue-property-decorator';
let module = require('@/assets/');
@Component
export default class ceshi extends Vue {
private mounted(){
new ("Module A");
new ("Module B");
new ("Module C");
}
}
</script>
<style lang='less' scoped>
</style>7. The second way to write exports
//documentclass Modulea{
constructor(public params:string){
(params);
}
newB(params:string){
new Moduleb(params);
}
newC(params:string){
new Modulec(params)
}
}
class Moduleb{
constructor(public params:string){
(params);
}
}
class Modulec{
constructor(public params:string){
(params);
}
}
= Modulea
= Moduleb
= Modulec
<template>
<div class='ceshi'>
</div>
</template>
<script lang='ts'>
import { Component,Vue } from 'vue-property-decorator';
let module = require('@/assets/');
@Component
export default class ceshi extends Vue {
private mounted(){
new ("Module A");
new ("Module B");
new ("Module C");
}
}
</script>
<style lang='less' scoped>
</style>8. Mixed export
//
function add(a,b){
return a + b;
}
function dist(a,b){
return a - b;
}
export { dist }
export default add;
//
import add,{dist} from "./"
The above is personal experience. I hope you can give you a reference and I hope you can support me more.