自定義vue組件，一般是局部引用的方式載入，使用的時(shí)候，在應(yīng)用的組件中使用 import moduleName from ‘module’ 導(dǎo)入，在components中注冊(cè)

<template> <div class='app-NewsInfo'> <h3>{{info.title}}</h3> <!-- 新聞評(píng)論子組件。 --> <comment :id='id'></comment> </div></template><script>import comment from '../sub/comment.vue';export default { data() { return { info: {}, id: this.$route.query.id }; }, methods: {}, components: { comment },</script>

那么如果某個(gè)組件經(jīng)常復(fù)用，豈不是每次在新組建中引用都要導(dǎo)入一次嗎？是的 。這種情況下可以將組件封裝成全局組件，一次導(dǎo)入之后，全局都可以使用。 雖然這種做法不太常見，但是這里還是將其整理出來(lái)。

1.首先創(chuàng)建一個(gè)文件夾loading

用來(lái)保存需要全局引用的組件，并且存放一些配置文件。

2.創(chuàng)建一個(gè)loading.vue的組件。

該組件中除了組件的基礎(chǔ)結(jié)構(gòu)，并無(wú)其他內(nèi)容。它的作用是用來(lái)加載準(zhǔn)備自定義的組件，最后將loading組件加載到全局的Vue中，這樣就一次性完成了所有自定義組件的加載，非常方便。

<template> <div class='loading'></div></template><script>export default { data() { return {}; }, methods: {}};</script><style scoped></style>

3.創(chuàng)建自定義組件

這里以一個(gè)簡(jiǎn)單封裝的mint-ui輪播圖為例。

<template> <div class='app-turns'> <mt-swipe :auto='4000'> <mt-swipe-item v-for='(item,i) of list' :key='i'> <img :src='http://www.piao2010.com/bcjs/item.img_url' @click='detail' :data-id='item.id'> </mt-swipe-item> </mt-swipe> </div></template><script>export default { name: 'navbar', props: ['list'], //接收父組件數(shù)據(jù) data() { return { }; }, methods: { detail(e) { var id = e.target.dataset.id; var url = `/GoodsInfo/${id}`; this.$router.push(url); } }, created() {}};</script><style scoped>.mint-swipe { height: 150px;}.mint-swipe img { width: 100%;}</style>

4.創(chuàng)建index.js，用來(lái)導(dǎo)出所有自定義組件。

import turns from ’./turns.vue’const loading = { install: function (Vue) { Vue.component(’turns’, turns) }}export default loading;

其實(shí)到這里組件封裝就結(jié)束了，下面再演示下如何使用。

5.在main.js中，導(dǎo)入并使用loading組件。

import loading from ’./lib/loading’;

Vue.use(loading);

這樣就將組件全局引用成功了！

6.在需要使用的地方，直接使用組件名即可。

<template> <div class='app-home'> <turns :list='list'></turns> </div></template>

通過(guò)這種方式，就能實(shí)現(xiàn)組件的全局引用。

這種做的好處是對(duì)于復(fù)用性非常高的組件，省去了每次導(dǎo)入的麻煩；

缺點(diǎn)是無(wú)法直觀的看到組件引入和注冊(cè)，對(duì)于不清楚的人來(lái)說(shuō)看不懂組件名的意義。

其實(shí)官方文檔中已經(jīng)提到了一種解決方案：

https://cn.vuejs.org/v2/guide/components-registration.html#基礎(chǔ)組件的自動(dòng)化全局注冊(cè)

基礎(chǔ)組件的自動(dòng)化全局注冊(cè)

可能你的許多組件只是包裹了一個(gè)輸入框或按鈕之類的元素，是相對(duì)通用的。我們有時(shí)候會(huì)把它們稱為基礎(chǔ)組件，它們會(huì)在各個(gè)組件中被頻繁的用到。

所以會(huì)導(dǎo)致很多組件里都會(huì)有一個(gè)包含基礎(chǔ)組件的長(zhǎng)列表：

import BaseButton from ‘./BaseButton.vue’ import BaseIcon from‘./BaseIcon.vue’ import BaseInput from ‘./BaseInput.vue’export default { components: {BaseButton,BaseIcon,BaseInput } }

而只是用于模板中的一小部分：

<BaseInput v-model=“searchText” @keydown.enter=“search” />

<BaseButton @click=“search”>

幸好如果你使用了 webpack (或在內(nèi)部使用了 webpack 的 Vue CLI 3+)，那么就可以使用 require.context 只全局注冊(cè)這些非常通用的基礎(chǔ)組件。這里有一份可以讓你在應(yīng)用入口文件 (比如 src/main.js) 中全局導(dǎo)入基礎(chǔ)組件的示例代碼：

import Vue from ‘vue’ import upperFirst from ‘lodash/upperFirst’import camelCase from ‘lodash/camelCase’const requireComponent = require.context( // 其組件目錄的相對(duì)路徑‘./components’, // 是否查詢其子目錄 false, // 匹配基礎(chǔ)組件文件名的正則表達(dá)式/Base[A-Z]w+.(vue|js)$/ )requireComponent.keys().forEach(fileName => { // 獲取組件配置 constcomponentConfig = requireComponent(fileName)// 獲取組件的 PascalCase 命名 const componentName = upperFirst(camelCase(// 剝?nèi)ノ募_頭的 ./ 和結(jié)尾的擴(kuò)展名fileName.replace(/^./(.*).w+$/, ‘$1’)) )// 全局注冊(cè)組件 Vue.component(componentName,// 如果這個(gè)組件選項(xiàng)是通過(guò) export default 導(dǎo)出的，// 那么就會(huì)優(yōu)先使用 .default，// 否則回退到使用模塊的根。componentConfig.default || componentConfig ) })

補(bǔ)充知識(shí)：vue組件注冊(cè) Vue.extend Vue.component Vue.use的使用 以及組件嵌套

我就廢話不多說(shuō)了，大家還是直接看代碼吧~

/** * vue.extend用法 * 使用基礎(chǔ) Vue 構(gòu)造器，創(chuàng)建一個(gè)“子類”。參數(shù)是一個(gè)包含組件選項(xiàng)的對(duì)象。 * 注意：此實(shí)例可以掛載到根實(shí)例之外 */ const Profile = Vue.extend({ template: ’<p>{{firstName}} {{lastName}} aka {{alias}}</p>’, data: function () { return { firstName: ’Walter’, lastName: ’White’, alias: ’Heisenberg’ } } }) // 創(chuàng)建 Profile 實(shí)例，并掛載到一個(gè)元素上。 new Profile().$mount(’#opp’)let navbar = { template: `<div class=’nav’> <input type='text' placeholder='請(qǐng)輸入關(guān)鍵字'/> </div>`, data:()=>{ return { } }, mounted() { console.log(this.$parent) }};const MyPlugin = { install:(vue, arguments)=>{ console.log(arguments); vue.component(’navbar’, navbar); }}Vue.use(MyPlugin, {a:1, b:2}); // 組件注冊(cè)成功// logo組件Vue.component('logo', { template: `<div class=’logo’> <img v-bind:src='http://www.piao2010.com/bcjs/logoSrc'> </div>`, inject: [’logoSrc’], data:()=>{ return { } }, mounted() { console.log(this.$parent) }})// header組件 組件調(diào)用 provie inject傳值Vue.component('buttoncounter', { template: `<div class=’header’> <logo></logo> {{header}} </div>`, provide:{ logoSrc:’https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1582433251882&di=de459decf2e157552b97a4879ae4135d&imgtype=0&src=http%3A%2F%2Fwww.suntop168.com%2Fblog%2Fzb_users%2Fupload%2F2014%2F2%2Fadf89182.jpg’ }, data:()=>{ return { header:’我是頭部導(dǎo)航欄’ } }, mounted() { console.log(this.$parent) }});// vue根實(shí)例let vm = new Vue({ el:'#app', data:{ name: ’Marry’ }, mounted(){ console.log(’vue根實(shí)例初始化完畢’) }})console.log(vm);

以上這篇Vue 實(shí)現(xiàn)創(chuàng)建全局組件,并且使用Vue.use() 載入方式就是小編分享給大家的全部?jī)?nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持好吧啦網(wǎng)。