溫馨提示×

溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊×
其他方式登錄
點擊 登錄注冊 即表示同意《億速云用戶服務(wù)條款》

Vue實現(xiàn)創(chuàng)建全局組件的方法是什么

發(fā)布時間：2020-08-12 14:29:41 來源：億速云 閱讀：680 作者：小新 欄目：開發(fā)技術(shù)

這篇文章主要介紹Vue實現(xiàn)創(chuàng)建全局組件的方法是什么，文中介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們一定要看完！

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

<template>
 <div class="app-NewsInfo">
 <h4>{{info.title}}</h4>
 <!-- 新聞評論子組件。 -->
 <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>

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

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

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

Vue實現(xiàn)創(chuàng)建全局組件的方法是什么

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

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

<template>
 <div class="loading"></div>
</template>

<script>
export default {
 data() {
 return {};
 },
 methods: {}
};
</script>
<style scoped>
</style>

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

這里以一個簡單封裝的mint-ui輪播圖為例。

<template>
 <div class="app-turns">
 <mt-swipe :auto="4000">
  <mt-swipe-item v-for="(item,i) of list" :key="i">
  <img :src="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，用來導(dǎo)出所有自定義組件。

import turns from './turns.vue'

const loading = {
 install: function (Vue) {
 Vue.component('turns', turns)
 }
}

export default loading;

其實到這里組件封裝就結(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>

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

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

缺點是無法直觀的看到組件引入和注冊，對于不清楚的人來說看不懂組件名的意義。

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

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

基礎(chǔ)組件的自動化全局注冊

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

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

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 只全局注冊這些非常通用的基礎(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( // 其組件目錄的相對路徑
‘./components', // 是否查詢其子目錄 false, // 匹配基礎(chǔ)組件文件名的正則表達(dá)式
/Base[A-Z]\w+.(vue|js)$/ )

requireComponent.keys().forEach(fileName => { // 獲取組件配置 const
componentConfig = requireComponent(fileName)

// 獲取組件的 PascalCase 命名 const componentName = upperFirst(
camelCase(
// 剝?nèi)ノ募_頭的 ./ 和結(jié)尾的擴(kuò)展名
fileName.replace(/^./(.*).\w+$/, ‘$1')
) )

// 全局注冊組件 Vue.component(
componentName,
// 如果這個組件選項是通過 export default 導(dǎo)出的，
// 那么就會優(yōu)先使用 .default，
// 否則回退到使用模塊的根。
componentConfig.default || componentConfig ) })

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

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

/**
 *  vue.extend用法
 *  使用基礎(chǔ) Vue 構(gòu)造器，創(chuàng)建一個“子類”。參數(shù)是一個包含組件選項的對象。
 *  注意：此實例可以掛載到根實例之外 
 */

 const Profile = Vue.extend({
 template: '<p>{{firstName}} {{lastName}} aka {{alias}}</p>',
 data: function () {
  return {
  firstName: 'Walter',
  lastName: 'White',
  alias: 'Heisenberg'
  }
 }
 })
 // 創(chuàng)建 Profile 實例，并掛載到一個元素上。
 new Profile().$mount('#opp')

let navbar = {
 template: `<div class='nav'>
     <input type="text" placeholder="請輸入關(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}); // 組件注冊成功

// logo組件
Vue.component("logo", {
 template: `<div class='logo'>
     <img v-bind:src="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&#63;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根實例
let vm = new Vue({
 el:"#app",
 data:{
  name: 'Marry'
 },
 mounted(){
  console.log('vue根實例初始化完畢')
 }
})

console.log(vm);

以上是Vue實現(xiàn)創(chuàng)建全局組件的方法是什么的所有內(nèi)容，感謝各位的閱讀！希望分享的內(nèi)容對大家有幫助，更多相關(guān)知識，歡迎關(guān)注億速云行業(yè)資訊頻道！

向AI問一下細(xì)節(jié)

免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點不代表本網(wǎng)站立場，如果涉及侵權(quán)請聯(lián)系站長郵箱：is@yisu.com進(jìn)行舉報，并提供相關(guān)證據(jù)，一經(jīng)查實，將立刻刪除涉嫌侵權(quán)內(nèi)容。

AI
助
手