vue 全局引用公共的組件以及公共的JS文件問(wèn)題
更新時(shí)間：2022年09月22日 08:48:36 作者：圓唉_
這篇文章主要介紹了vue 全局引用公共的組件以及公共的JS文件問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
全局引用公共的組件及公共的JS文件
1. 創(chuàng)建一個(gè)公共的目錄 timeline ，里面包含 timeline.js 和 timeline.vue 文件，timeline.vue 用來(lái)寫(xiě)公共的頁(yè)面，timeline.js 用來(lái)導(dǎo)出這個(gè)組件。
timeline.vue 文件內(nèi)容如下
<template>
<div>頁(yè)面展示內(nèi)容</div>
</template>
<script>
export default {
data() {
return {};
},
methods: {}
};
</script>
<style lang="less" scoped>
</style>
timeline.js 文件內(nèi)容如下
import timelineData from './timeline.vue';
const timeline = {
install: (Vue) => {
// 注冊(cè)并獲取組件，然后在 main.js 中引入，并 Vue.use()掛載
Vue.component('timeline', timelineData)
}
};
export default timeline;
2. 在 main.js 中引入公共的文件并掛載到Vue中
... // 引入timeline import timeline from './timeline/timeline.js'; Vue.use(timeline); ...
3. 在需要用到 timeline 的組件文件中直接使用即可
<template> <div> // 頁(yè)面中直接使用即可 <timeline></timeline> </div> </template>
全局引入自定義組件問(wèn)題
1. 書(shū)寫(xiě)組件
<!-- index.vue -->
<template>
<button class="h-button" :type="type">
<slot></slot>
</button>
</template>
<script>
export default {
props:{
type:{
type:String,
default:'button'
}
},
data(){
return{
}
}
}
</script>
2. 暴露install()方法
// index.js
import HButton from './index.vue';
HButton.install=function(Vue){
Vue.component('HButton',HButton) // (組件名稱，對(duì)應(yīng)組件)
}
export default HButton;
3. 全局注冊(cè)
// main.js // @ is an alias to /src import HButton from '@/components/Btn/index' Vue.use(HButton)
4. 使用
<!-- Home.vue 使用 -->
<template>
<div class="home">
<h-button>組件使用</h-button>
</div>
</template>
<script>
export default {
name: "Home",
components: {},
};
</script>
以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要介紹了vue父子組件的數(shù)據(jù)傳遞示例,小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-03-03
這篇文章主要介紹了Vue路由切換時(shí)的左滑和右滑效果,小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-05-05
vue?+elementui?項(xiàng)目登錄通過(guò)不同賬號(hào)切換側(cè)邊欄菜單的顏色
這篇文章主要介紹了vue?+elementui?項(xiàng)目登錄通過(guò)不同賬號(hào)切換側(cè)邊欄菜單的顏色,本文給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友參考下吧2024-01-01
解決vue數(shù)組中對(duì)象屬性變化頁(yè)面不渲染問(wèn)題
今天小編就為大家分享一篇解決vue數(shù)組中對(duì)象屬性變化頁(yè)面不渲染問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-08-08
這篇文章主要介紹了vue面試之new Vue的時(shí)候到底做了什么原理及vue加載流程，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-05-05
ElementUI之表格toggleRowSelection選中踩坑記錄
這篇文章主要介紹了ElementUI之表格toggleRowSelection選中踩坑記錄,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-03-03
這篇文章主要介紹了詳解vue-cli下ESlint 配置說(shuō)明，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-09-09
vue項(xiàng)目如何實(shí)現(xiàn)Echarts在label中獲取點(diǎn)擊事件
這篇文章主要介紹了vue項(xiàng)目如何實(shí)現(xiàn)Echarts在label中獲取點(diǎn)擊事件，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-10-10
詳解vue父子組件關(guān)于模態(tài)框狀態(tài)的綁定方案
這篇文章主要介紹了詳解vue父子組件關(guān)于模態(tài)框狀態(tài)的綁定方案，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2019-06-06
本文主要介紹了在Vue中使用的一些常見(jiàn)混淆用法,包括new Vue()、export default {}、createApp()等,以及如何使用混淆器對(duì)代碼進(jìn)行加固,需要的可以參考下2023-12-12