在vue中使用export?default導出的class類方式
更新時間：2022年03月31日 08:37:44 作者：ldz_miantiao
這篇文章主要介紹了在vue中使用export?default導出的class類方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
使用export default導出class類
首先我們要創(chuàng)建一個類并導出
class win {
? getProcessInfo() {
? ? return 233;
? }
}
export default new win(); //用的是export default方法，并且導出的時候就已經(jīng)實例化了在vue文件中引用
.....
..這里是template...
.....
<script>
import win from "這里是路徑";
export default {
? data() {
? ? return {};
? },
? methods: {
? ? getProcessInfoFn() {
? ? ? console.log(win.getProcessInfo()); //233
? ? }
? }
};
</script>關(guān)于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");
? ? ? ? /* 第二種方式調(diào)用
? ? ? ? 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"
?以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要介紹了Vue雙向綁定實現(xiàn)原理與方法,結(jié)合實例形式詳細分析了發(fā)布者-訂閱者模式、臟值檢查、數(shù)據(jù)劫持與雙向綁定相關(guān)實現(xiàn)技巧,需要的朋友可以參考下2020-05-05
這篇文章主要介紹了uniapp開發(fā)打包多端應用完整流程指南,包括了uniapp打包小程序，uniapp打包安卓apk，uniapp打包IOS應用,需要的朋友可以參考下2022-12-12
本篇文章主要介紹了解讀vue生成的文件目錄結(jié)構(gòu)及說明，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-11-11
這篇文章主要介紹了解決Vue 刷新頁面導航顯示高亮位置不對問題,本文圖文實例相結(jié)合給大家介紹的非常詳細，具有一定的參考借鑒價值，需要的朋友可以參考下2019-12-12
Vue使用v-for數(shù)據(jù)渲染順序混亂的原因及解決方案
在 Vue.js 中,使用 v-for 指令進行數(shù)據(jù)渲染時,有時會遇到渲染順序混亂的問題,這種問題主要與 Vue 的響應式系統(tǒng)、DOM 更新機制以及數(shù)組的變更方法有關(guān),以下是對這一現(xiàn)象的深入分析及解決方案,需要的朋友可以參考下2025-01-01
Vite結(jié)合Vue刪除指定環(huán)境的console.log問題
這篇文章主要介紹了Vite結(jié)合Vue刪除指定環(huán)境的console.log問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-03-03
這篇文章主要介紹了使用Vant如何完成各種Toast提示框，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-05-05
Avue.js是基于現(xiàn)有的element-ui庫進行的二次封裝，簡化一些繁瑣的操作，核心理念為數(shù)據(jù)驅(qū)動視圖,主要的組件庫針對table表格和form表單場景，這篇文章給大家介紹了vue項目中使用AvueJs的相關(guān)知識，感興趣的朋友跟隨小編一起看看吧2022-10-10
Vue項目創(chuàng)建首頁發(fā)送axios請求的方法實例
這篇文章主要給大家介紹了關(guān)于Vue項目創(chuàng)建首頁發(fā)送axios請求的相關(guān)資料,文中通過圖文以及實例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友可以參考下2023-02-02
詳解探索 vuex 2.0 以及使用 vuejs 2.0 + vuex 2.0 構(gòu)建記事本應用
本篇文章主要介紹了詳解探索 vuex 2.0 以及使用 vuejs 2.0 + vuex 2.0 構(gòu)建記事本應用 ，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-06-06