Vue.use中怎么自定義全局組件

本篇文章給大家分享的是有關(guān)Vue.use中怎么自定義全局組件，小編覺得挺實用的，因此分享給大家學(xué)習(xí)，希望大家閱讀完這篇文章后可以有所收獲，話不多說，跟著小編一起來看看吧。

創(chuàng)新互聯(lián)主營鹿城網(wǎng)站建設(shè)的網(wǎng)絡(luò)公司,主營網(wǎng)站建設(shè)方案,app軟件開發(fā)公司,鹿城h5小程序定制開發(fā)搭建,鹿城網(wǎng)站營銷推廣歡迎鹿城等地區(qū)企業(yè)咨詢

首先看下目前的項目結(jié)構(gòu)：

webpack首先會加載main.js，所以我們在main的js里面引入。我以element ui來做對比說明

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是組件的默認入口
import Loading from '../components/loading'
Vue.use(Loading);

Vue.use(ElementUi);
new Vue({
 el: '#app',
 render: h => h(App)
})

然后在Loading.vue里面定義自己的組件模板

<!-- 這里和普通組件的書寫一樣 -->
<template>
  <div class="loading">
    loading...
  </div>
</template>

在index.js文件里面添加install方法

import MyLoading from './Loading.vue'
// 這里是重點
const Loading = {
  install: function(Vue){
    Vue.component('Loading',MyLoading)
  }
}

// 導(dǎo)出組件
export default Loading

接下來就是在App.Vue里面使用組件了，這個組件已經(jīng)在main.js定義加載了

<template>
 <div id="app">
 <!-- 使用element ui的組件 -->
 <el-button>默認按鈕</el-button>

 <!-- 使用自定義組件 -->
 <Loading></Loading>
 </div>
</template>

下面是效果圖

以上就是Vue.use中怎么自定義全局組件，小編相信有部分知識點可能是我們?nèi)粘９ぷ鲿姷交蛴玫降?。希望你能通過這篇文章學(xué)到更多知識。更多詳情敬請關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道。

網(wǎng)頁題目：Vue.use中怎么自定義全局組件
網(wǎng)頁路徑：http://bm7419.com/article0/jdisio.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供微信小程序、微信公眾號、網(wǎng)站策劃、面包屑導(dǎo)航、定制網(wǎng)站、軟件開發(fā)

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)