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