Vue.use如何自定義全局組件

這篇文章主要講解了“Vue.use如何自定義全局組件”，文中的講解內(nèi)容簡(jiǎn)單清晰，易于學(xué)習(xí)與理解，下面請(qǐng)大家跟著小編的思路慢慢深入，一起來(lái)研究和學(xué)習(xí)“Vue.use如何自定義全局組件”吧！

首先看下目前的項(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>

Vue的優(yōu)點(diǎn)

Vue具體輕量級(jí)框架、簡(jiǎn)單易學(xué)、雙向數(shù)據(jù)綁定、組件化、數(shù)據(jù)和結(jié)構(gòu)的分離、虛擬DOM、運(yùn)行速度快等優(yōu)勢(shì)，Vue中頁(yè)面使用的是局部刷新，不用每次跳轉(zhuǎn)頁(yè)面都要請(qǐng)求所有數(shù)據(jù)和dom，可以大大提升訪(fǎng)問(wèn)速度和用戶(hù)體驗(yàn)。

感謝各位的閱讀，以上就是“Vue.use如何自定義全局組件”的內(nèi)容了，經(jīng)過(guò)本文的學(xué)習(xí)后，相信大家對(duì)Vue.use如何自定義全局組件這一問(wèn)題有了更深刻的體會(huì)，具體使用情況還需要大家實(shí)踐驗(yàn)證。這里是億速云，小編將為大家推送更多相關(guān)知識(shí)點(diǎn)的文章，歡迎關(guān)注！