溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
本篇文章給大家分享的是有關Vue.use中怎么自定義全局組件，小編覺得挺實用的，因此分享給大家學習，希望大家閱讀完這篇文章后可以有所收獲，話不多說，跟著小編一起來看看吧。
首先看下目前的項目結構：
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)
}
}
// 導出組件
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中怎么自定義全局組件，小編相信有部分知識點可能是我們日常工作會見到或用到的。希望你能通過這篇文章學到更多知識。更多詳情敬請關注億速云行業(yè)資訊頻道。
