在vue中使用export default导出的class类方式
作者:ldz_miantiao 时间:2024-04-09 10:48:47
使用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"
以上为个人经验,希望能给大家一个参考,也希望大家多多支持。
来源:https://blog.csdn.net/qq_40282732/article/details/104343595
标签:vue,export,default,class类
![](/images/zang.png)
![](/images/jiucuo.png)
猜你喜欢
Web开发的改良
2009-06-25 14:34:00
Label Propagation算法原理示例解析
2022-02-03 22:44:43
![](https://img.aspxhome.com/file/2023/2/131542_0s.jpg)
javascript记住用户名和登录密码(两种方式)
2024-05-02 16:16:44
Python最火、R极具潜力 2017机器学习调查报告
2023-10-10 01:40:47
![](https://img.aspxhome.com/file/2023/8/127138_0s.jpg)
Springboot项目对数据库用户名密码实现加密过程解析
2024-01-19 23:02:04
Python+Selenium实现短视频热点爬取
2022-03-07 23:43:37
![](https://img.aspxhome.com/file/2023/1/86151_0s.jpg)
css分页放大镜效果
2008-11-02 15:35:00
Python中内建函数的简单用法说明
2021-09-01 08:19:58
使用python实现下拉选择框和页签的方法
2021-10-01 04:07:41
![](https://img.aspxhome.com/file/2023/1/118541_0s.jpg)
MySQL的使用中实现读写分离的教程
2024-01-20 00:03:23
python 判断文件或文件夹是否存在
2021-06-30 05:56:55
你还在 Select * 吗?
2024-01-24 22:10:50
![](https://img.aspxhome.com/file/2023/6/110936_0s.jpg)
详解Python中的__new__、__init__、__call__三个特殊方法
2023-03-31 00:28:52
python 简易计算器程序,代码就几行
2021-05-23 22:28:32
Python中的self用法详解
2023-08-22 15:34:19
![](https://img.aspxhome.com/file/2023/2/112162_0s.png)
JavaScript控制台的更多功能
2024-02-24 12:46:42
Python中选择结构实例讲解
2023-06-26 14:56:09
python 合并多个excel中同名的sheet
2023-06-06 08:34:27
![](https://img.aspxhome.com/file/2023/3/102943_0s.png)
Go基础教程系列之defer、panic和recover详解
2024-02-02 06:34:11
Python连接mysql数据库及简单增删改查操作示例代码
2022-03-10 18:01:57
![](https://img.aspxhome.com/file/2023/8/66908_0s.png)