vue組件暴露和.js文件暴露接口操作
更新時(shí)間：2020年08月11日 14:31:28 作者：遠(yuǎn)在北方的鬼
這篇文章主要介紹了vue組件暴露和.js文件暴露接口操作，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧
1、將同一類(lèi)型的組件放在一個(gè)文件夾下
2、在此文件夾下創(chuàng)建一個(gè)index.js
3、在index.js中導(dǎo)入組件，并把他們暴露出去
1、寫(xiě)法一
import studentCourse1 from './studentCourse.vue' import studentInfo1 from './studentInfo.vue' export var studentCourse=studentCourse1 export var studentInfo=studentInfo1
2、寫(xiě)法二
export var studentCourse=()=>import('./studentCourse.vue')
export var studentInfo=()=>import('./studentInfo.vue')
//export var studentInfo=()=>{
return import('./studentInfo.vue')
}
4、最后在.vue文件中使用組件
此處你只需引入index.js所在文件夾就行啦
import {studentCourse,studentInfo} from './components/stuCom'
export default{
components:{
'StudentCourse':studentCourse,
'StudentInfo':studentInfo
}
}
1、將.js放在同一個(gè)文件夾下
2、同樣一定要有一個(gè)index.js文件
3、 index.js文件內(nèi)容如下
import auth from './auth.js'
import error from './error-log.js'
export default{
auth,
error
}
4、在main.js中
import utils from './utils'
Vue.use(utils.auth,{params})
補(bǔ)充知識(shí)：vue項(xiàng)目中將方法名暴露給APP端調(diào)用
只需要將methods中的方法賦值到window對(duì)象即可
created() {
window.getParams = this.getParams
},
methods: {
getParams(params) {
this.id = params.id
// ...
},
}
也可以賦值給window對(duì)象中的某個(gè)對(duì)象
以上這篇vue組件暴露和.js文件暴露接口操作就是小編分享給大家的全部?jī)?nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
vue移動(dòng)端城市三級(jí)聯(lián)動(dòng)組件使用詳解
這篇文章主要為大家詳細(xì)介紹了vue移動(dòng)端城市三級(jí)聯(lián)動(dòng)組件的使用，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2019-07-07
這篇文章主要介紹了解決vue表單為空也能提交的問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-06-06
這篇文章主要給大家介紹了關(guān)于vue打包后修改配置后端IP地址、端口等信息的兩種方法,文中通過(guò)代碼示例以及圖文介紹的非常詳細(xì),對(duì)大家學(xué)習(xí)或者使用vue打包具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2023-09-09
近期學(xué)習(xí)vue3的父子組件之間的傳值,發(fā)現(xiàn)跟vue2.x的父子組件之間的傳值并沒(méi)有太大的區(qū)別,下面這篇文章主要給大家介紹了關(guān)于vue3父組件和子組件如何傳值的相關(guān)資料,需要的朋友可以參考下2022-08-08
React DOM diff 對(duì)比Vue DOM diff
這篇文章主要為大家介紹了React DOM diff 對(duì)比Vue DOM diff 區(qū)別詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-09-09
Nuxt3:拉取項(xiàng)目模板失敗問(wèn)題以及解決
文章描述了在使用官網(wǎng)命令創(chuàng)建Nuxt3項(xiàng)目時(shí)遇到的問(wèn)題,通過(guò)分析命令,推測(cè)問(wèn)題出在拉取項(xiàng)目模板失敗,解決方法是手動(dòng)訪(fǎng)問(wèn)并下載項(xiàng)目模板,解壓后按照官網(wǎng)教程安裝依賴(lài)并啟動(dòng),最終成功解決問(wèn)題2024-12-12
這篇文章主要介紹了Vue.js路由管理器 Vue Router，主要介紹的是路由元信息，命名路由以及嵌套路由等使用方法，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2018-08-08
這篇文章主要介紹了Vue2項(xiàng)目配置@指向src路徑方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-12-12
這篇文章主要介紹了Vue從TodoList中學(xué)父子組件通信，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2019-02-02
vue實(shí)現(xiàn)虛擬滾動(dòng)的示例詳解
虛擬滾動(dòng)或者移動(dòng)是指禁止原生滾動(dòng),之后通過(guò)監(jiān)聽(tīng)瀏覽器的相關(guān)事件實(shí)現(xiàn)模擬滾動(dòng),下面小編就來(lái)和大家詳細(xì)介紹一下vue實(shí)現(xiàn)虛擬滾動(dòng)的示例代碼,需要的可以參考下2023-10-10