在學(xué)習(xí)全局組件之前赌髓，我們先擼個(gè)實(shí)例了解下：
import Loading from './Loading.vue'//這個(gè)組件就不寫了，大家各自發(fā)揮吧……
const Loading = {
? Install: function (Vue) {
? ? ? ? Vue.component(“Loading”, Loading)
? }
}
export default Loading;
通常我們?cè)趍ain.js文件里注冊(cè)全局組件。
import App from './App.vue'
//引入element-ui組件
import ElementUi from 'element-ui'
import 'element-ui/lib/theme-default/index.css'
//引入自定義組件
import Loading from '../components/loading'? ? ?//注意引用組件的路徑
Vue.use(Loading);
Vue.use(ElementUi);
new Vue({
? el: '#app',
? render: h => h(App)
})
最后在頁面直接調(diào)用標(biāo)簽<loading></loading>就可以了呀舔。
上面這個(gè)方法應(yīng)該是大家經(jīng)常使用的场斑，今天我想給大家介紹一個(gè)新的方法，也是后續(xù)如果遇到需要注冊(cè)全局組件的量比較多的時(shí)候挽鞠，普遍采用的一種方法（自動(dòng)化全局注冊(cè)組件）：
一疚颊、新建一個(gè)Js文件，global-components.js
const requireComponent = require.context( '@/components/', ?true,??/\.(vue)$/);
1信认、'@/components/'???//其組件目錄的相對(duì)路徑
2材义、true???//是否查詢其子目錄
3、/\.(vue)$/???//匹配基礎(chǔ)組件文件名的正則表達(dá)式
requireComponent.keys().forEach(item=> {
? ? const componentConfig = requireComponent(item);? //獲取組件配置
? ? const componentName = item.replace(/^\.\//, '').replace(/\/\index.vue$/, '');? //獲取組件的命名---可以根據(jù)自己項(xiàng)目的實(shí)際情況進(jìn)行修改
? ? Vue.component(componentName,?componentConfig.default || componentConfig);??//全局注冊(cè)組件（如果這個(gè)組件選項(xiàng)是通過 `export default`? ? ? 導(dǎo)出的嫁赏，那么就會(huì)優(yōu)先使用 `.default`其掂，否則會(huì)回退使用模塊的根）
});
二、在main.js中引入該文件即可（放在new Vue之前）
<package-name><package-name/>//如何使用：無需引入潦蝇，直接在頁面中使用
補(bǔ)充下知識(shí)點(diǎn)：
1款熬、Vue.component() //注冊(cè)或獲取全局組件，注冊(cè)還會(huì)自動(dòng)使用給定的id設(shè)置組件的名稱攘乒，說到它贤牛，就不免想到vue.extend() //創(chuàng)建一個(gè)局部組件構(gòu)造器，構(gòu)造器中有個(gè)選項(xiàng)對(duì)象则酝，選項(xiàng)對(duì)象的template屬性用于自定義渲染HTML殉簸。
1.1、創(chuàng)建局部組件構(gòu)造器
? ? var localComponent= Vue.extend({
? ? ? ? template: '<li>{{firstName}} {{lastName}}</li>'
????????data: function() {
????????????????firstName: “xiaohua”,
????????????????lastName: “zhang”
? ? ? ? }
? ? })
? ? new Vue({
? ? ? ? el: '#root',
? ? ? ? components: {
? ? ? ? ? ? 'my-component': localComponent
? ? ? ? }
????})
在頁面中使用：<local-component></local-component>
