詳解Vue.use自定義自己的全局組件
通常我們?cè)趘ue里面使用別人開(kāi)發(fā)的組件，第一步就是install,第二步在main.js里面引入，第三步Vue.use這個(gè)組件。今天我簡(jiǎn)單的也來(lái)use一個(gè)自己的組件。
這里我用的webpack-simple這個(gè)簡(jiǎn)單版本的腳手架為例，安裝就不啰嗦了，直接進(jìn)入正題
首先看下目前的項(xiàng)目結(jié)構(gòu)：
webpack首先會(huì)加載main.js，所以我們?cè)趍ain的js里面引入。我以element ui來(lái)做對(duì)比說(shuō)明
import Vue from 'vue'
import App from './App.vue'
// 引入element-ui組件
import ElementUi from 'element-ui'
import 'element-ui/lib/theme-default/index.css'
// 引入自定義組件。index.js是組件的默認(rèn)入口
import Loading from '../components/loading'
Vue.use(Loading);
Vue.use(ElementUi);
new Vue({
el: '#app',
render: h => h(App)
})
然后在Loading.vue里面定義自己的組件模板
<!-- 這里和普通組件的書(shū)寫(xiě)一樣 -->
<template>
<div class="loading">
loading...
</div>
</template>
在index.js文件里面添加install方法
import MyLoading from './Loading.vue'
// 這里是重點(diǎn)
const Loading = {
install: function(Vue){
Vue.component('Loading',MyLoading)
}
}
// 導(dǎo)出組件
export default Loading
接下來(lái)就是在App.Vue里面使用組件了，這個(gè)組件已經(jīng)在main.js定義加載了
<template> <div id="app"> <!-- 使用element ui的組件 --> <el-button>默認(rèn)按鈕</el-button> <!-- 使用自定義組件 --> <Loading></Loading> </div> </template>
下面是效果圖
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
使用Vue調(diào)取接口,并渲染數(shù)據(jù)的示例代碼
今天小編就為大家分享一篇使用Vue調(diào)取接口,并渲染數(shù)據(jù)的示例代碼，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2019-10-10
vue iview實(shí)現(xiàn)動(dòng)態(tài)新增和刪除
這篇文章主要為大家詳細(xì)介紹了vue iview實(shí)現(xiàn)動(dòng)態(tài)新增和刪除，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2020-06-06
今天小編就為大家分享一篇解決vue熱替換失效的根本原因，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-09-09
一次Vue中computed沒(méi)有觸發(fā)的原因以及排查經(jīng)歷
這篇文章主要介紹了一次Vue中computed沒(méi)有觸發(fā)的原因以及排查經(jīng)歷,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-11-11
vue canvas繪制矩形并解決由clearRec帶來(lái)的閃屏問(wèn)題
這篇文章主要介紹了vue canvas繪制矩形并解決由clearRec帶來(lái)的閃屏問(wèn)題,本文給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2019-09-09
vue+springboot+element+vue-resource實(shí)現(xiàn)文件上傳教程
這篇文章主要介紹了vue+springboot+element+vue-resource實(shí)現(xiàn)文件上傳教程，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2020-10-10
解決vue數(shù)據(jù)不實(shí)時(shí)更新的問(wèn)題(數(shù)據(jù)更改了,但數(shù)據(jù)不實(shí)時(shí)更新)
這篇文章主要介紹了解決vue數(shù)據(jù)不實(shí)時(shí)更新的問(wèn)題(數(shù)據(jù)更改了,但數(shù)據(jù)不實(shí)時(shí)更新)，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2020-10-10
利用vue.js把靜態(tài)json綁定bootstrap的table方法
今天小編就為大家分享一篇利用vue.js把靜態(tài)json綁定bootstrap的table方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-08-08
解決router.beforeEach()動(dòng)態(tài)加載路由出現(xiàn)死循環(huán)問(wèn)題
這篇文章主要介紹了解決router.beforeEach()動(dòng)態(tài)加載路由出現(xiàn)死循環(huán)問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-10-10
vue components 動(dòng)態(tài)組件詳解
這篇文章主要介紹了vue components 動(dòng)態(tài)組件，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2021-11-11