扫码关注官方微信

扫码下载APP
返回顶部
首页 > 资讯 > 前端开发 > JavaScript >在vue中使用export default导出的class类方式
  • 821

0
分享到

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

2024-04-02 19:04:59 821人浏览 八月长安
摘要

目录使用export default导出class类关于export的多种导出形式1、文件中存在多个export的时候2、使用export default时3、单个export且不使

使用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'

@Component
export default class ceshi extends Vue {
    private mounted(){
        new Modulea("模块A");
        new Moduleb("模块B");
        new 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"
 

以上为个人经验，希望能给大家一个参考，也希望大家多多支持编程网。 

--结束END--

本文标题: 在vue中使用export default导出的class类方式

本文链接: https://lsjlt.com/news/144525.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

猜你喜欢
  • 在vue中使用export default导出的class类方式
    目录使用export default导出class类关于export的多种导出形式1、文件中存在多个export的时候2、使用export default时3、单个export且不使...
    99+
    2024-04-02
  • 在vue中怎么使用export default导出的class类
    本文小编为大家详细介绍“在vue中怎么使用export default导出的class类”，内容详细，步骤清晰，细节处理妥当，希望这篇“在vue中怎么使用export default导出的class类”文章能帮助大家解决...
    99+
    2023-06-29
  • export default 和 export 的使用方式示例详解
    node中导入模块：var 名称 = require('模块标识符') node中向外暴露成员的形式：module.exports = {} 在ES6中，也通过规范的...
    99+
    2024-04-02
  • Vue中使用 class 类样式的方法详情
    目录1. 布尔值2.表达式3.多类封装4.可以直接在 v-bind：中使用数组形式使用class类在vue中为我们提供了 几种方式来使用class类的样式 1. 布尔值 我们先正常在...
    99+
    2024-04-02
  • Vue中如何使用class类样式
    这篇文章将为大家详细讲解有关Vue中如何使用class类样式，小编觉得挺实用的，因此分享给大家做个参考，希望大家阅读完这篇文章后可以有所收获。在vue中为我们提供了 几种方式来使用class类的样式1. 布尔值我们先正常在 style 标签...
    99+
    2023-06-25
  • VUE中的exportdefault和export使用方法解析
    目录export default和export的区别export default简单示例注意：代码示例export default和export的区别 export主要用于对外输出本...
    99+
    2022-12-14
    VUE export default VUE export
  • vue中使用js-xlsx导出excel的实现方法
    目录安装第一种第二种第三种安装 npm install --save xlsx file-saver 在组件里面引入 import FileSaver from 'file-save...
    99+
    2024-04-02
  • dataV大屏在vue中的使用方式
    目录前言一、dataV可以实现什么效果？二、使用步骤1.安装依赖2.引入3.使用三、效果前言 随着信息化的发展，大屏展示的需求越来越多，使用e-charts一个一个的做配置太麻烦，于...
    99+
    2024-04-02
  • setTimeout在vue中的正确使用方式
    目录setTimeout在vue中的正确使用遇到了1个坑问题出在我的格式上面解决vue在setTimeout内修改this失效使用箭头函数总结setTimeout在vue中的正确使用...
    99+
    2023-01-28
    vue使用setTimeout vue setTimeout setTimeout在vue使用
  • 怎么在python中使用impor方法导入导出数据
    怎么在python中使用impor方法导入导出数据？针对这个问题，这篇文章详细介绍了相对应的分析和解答，希望可以帮助更多想解决这个问题的小伙伴找到更简单易行的方法。Python主要用来做什么Python主要应用于：1、Web开发；2、数据科...
    99+
    2023-06-14
  • Vue中$forceUpdate()的使用方式
    目录$forceUpdate()的使用有两种解决方法 方法一方法二关于$forceUpdate的一些理解$forceUpdate()的使用 在Vue官方文档中指出...
    99+
    2024-04-02
  • Vue中的.vue文件的使用方式
    目录定义.vue文件引用.vue文件使用render函数什么是.vue文件，它的作用是什么需要安装vue-loader npm i vue-loader vue-template-c...
    99+
    2024-04-02
  • 怎么避免在Vue中使用null作为class的空值
    本篇内容主要讲解“怎么避免在Vue中使用null作为class的空值”，感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷，实用性强。下面就让小编来带大家学习“怎么避免在Vue中使用null作为class的...
    99+
    2024-04-02
  • angularJs中关于ng-class的使用方式有哪些
    小编给大家分享一下angularJs中关于ng-class的使用方式有哪些，相信大部分人都还不怎么了解，因此分享这篇文章给大家参考一下，希望大家阅读完这篇文章后大有收获，下面让我们一起去了解一下吧！在开发中...
    99+
    2024-04-02
  • Vue中导入excel文件的两种方式及使用步骤
    目录导入excel文件前言第一种方法：form表单一、文件上传的三要素是什么？二、具体使用步骤第二种方法：el-upload导入excel文件 前言 两种导入文件的方法：form表单...
    99+
    2022-12-22
    Vue导入excel文件 Vue excel文件
  • vue中this.$parent的使用方式
    目录vue组件this.$parent一、在实例中二、在组件中调用组件vue子组件this.$parent调用父组件方法报错TypeError:this.parent.xxx is ...
    99+
    2024-04-02
  • JavaScript 中使用SpreadJS导入和导出 Excel 文件的方法
    目录设置 JavaScript 电子表格项目添加 Excel 导入代码将数据添加到导入的 Excel 文件添加迷你图添加 Excel 导出代码JavaScript在前端领域占据着绝对...
    99+
    2024-04-02
  • vue中使用file-saver导出文件的全过程记录
    目录一、安装二、语法三、例子使用保存文字 require()储存文字保存网址保存画布保存文件四、具体使用总结一、安装 # Basic Node.JS installation npm...
    99+
    2024-04-02
  • css中id和class的定义格式以及使用方法
    本篇内容介绍了“css中id和class的定义格式以及使用方法”的有关知识，在实际案例的操作过程中，不少人都会遇到这样的困境，接下来就让小编带领大家学习一下如何处理这些情况吧！希望大家仔细阅读，能够学有所成...
    99+
    2024-04-02
  • 在vue中使用eacharts创建graph关系图方式
    目录使用eacharts创建graph关系图vue中关系图组件1.Graph.vue2.GraphDemo.vue使用eacharts创建graph关系图 在最近的工作中遇到了这个问...
    99+
    2024-04-02
软考高级职称资格查询
热门wiki
近期文章
推荐阅读
热门问答
热门标签
编程网，编程工程师的家园，是目前国内优秀的开源技术社区之一，形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容，为IT开发者提供了一个发现、使用、并交流开源技术的平台。

  • 官方手机版

  • 微信公众号

  • 商务合作