在vue中使用export?default導(dǎo)出的class類方式
更新時(shí)間：2022年03月31日 08:37:44 作者：ldz_miantiao
這篇文章主要介紹了在vue中使用export?default導(dǎo)出的class類方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
使用export default導(dǎo)出class類
首先我們要?jiǎng)?chuàng)建一個(gè)類并導(dǎo)出
class win {
? getProcessInfo() {
? ? return 233;
? }
}
export default new win(); //用的是export default方法，并且導(dǎo)出的時(shí)候就已經(jīng)實(shí)例化了在vue文件中引用
.....
..這里是template...
.....
<script>
import win from "這里是路徑";
export default {
? data() {
? ? return {};
? },
? methods: {
? ? getProcessInfoFn() {
? ? ? console.log(win.getProcessInfo()); //233
? ? }
? }
};
</script>關(guān)于export的多種導(dǎo)出形式
require：node和es6都支持的引入export/import：只有es6 支持的導(dǎo)出引入module.exports/exports：只有 node 支持的導(dǎo)出
1、文件中存在多個(gè)export的時(shí)候
//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時(shí)
//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、單個(gè)export且不使用default時(shí)
引用方式同第一種情況
//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、單個(gè)export使用default時(shí)
//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時(shí)
//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、混合導(dǎo)出
//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"
?以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要介紹了vue高德地圖繪制行政區(qū)邊界功能,本文通過實(shí)例代碼給大家介紹的非常詳細(xì),感興趣的朋友一起看看吧2024-03-03
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)二級(jí)彈框案例，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-08-08
vue組件實(shí)現(xiàn)首次加載就觸發(fā)watch
這篇文章主要介紹了vue組件實(shí)現(xiàn)首次加載就觸發(fā)watch方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-07-07
Vue CLI3創(chuàng)建項(xiàng)目部署到Tomcat 使用ngrok映射到外網(wǎng)
這篇文章主要介紹了Vue CLI3創(chuàng)建項(xiàng)目部署到Tomcat 使用ngrok映射到外網(wǎng),本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2019-05-05
本篇文章主要介紹了詳解vue+css3做交互特效的方法，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-11-11
vue-router路由懶加載及實(shí)現(xiàn)的3種方式
這篇文章主要給大家介紹了關(guān)于vue-router路由懶加載及實(shí)現(xiàn)的3種方式，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2021-02-02
利用vue開發(fā)一個(gè)所謂的數(shù)獨(dú)方法實(shí)例
數(shù)獨(dú)是源自18世紀(jì)瑞士的一種數(shù)學(xué)游戲，是一種運(yùn)用紙、筆進(jìn)行演算的邏輯游戲。下面這篇文章主要給大家介紹了關(guān)于利用vue開發(fā)一個(gè)所謂的數(shù)獨(dú)的相關(guān)資料，文中通過示例代碼介紹的非常詳細(xì)，需要的朋友可以參考下。2017-12-12
這篇文章主要介紹了Element Popover 彈出框的使用示例，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-07-07
在當(dāng)今前端開發(fā)的領(lǐng)域中,Vue 框架因其高效和靈活的特性備受開發(fā)者青睞,而 Vant 是一個(gè)輕量的移動(dòng)端組件庫,為 Vue 應(yīng)用的開發(fā)提供了豐富且便捷的功能組件,本文將就如何在 Vue 框架中通過 Vant 來實(shí)現(xiàn)日期選擇器的使用,需要的朋友可以參考下2024-08-08
這篇文章主要介紹了解決VuePress頁面亂碼問題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-09-09