Vue 實現建立全域性元件,並且使用Vue.use() 載入方式

阿新 • • 發佈：2020-08-12

自定義vue元件，一般是區域性引用的方式載入，使用的時候，在應用的元件中使用 import moduleName from ‘module' 匯入，在components中註冊

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

那麼如果某個元件經常複用，豈不是每次在新組建中引用都要匯入一次嗎？是的。這種情況下可以將元件封裝成全域性元件，一次匯入之後，全域性都可以使用。雖然這種做法不太常見，但是這裡還是將其整理出來。

1.首先建立一個資料夾loading

用來儲存需要全域性引用的元件，並且存放一些配置檔案。

Vue 實現建立全域性元件,並且使用Vue.use() 載入方式

2.建立一個loading.vue的元件。

該元件中除了元件的基礎結構，並無其他內容。它的作用是用來載入準備自定義的元件，最後將loading元件載入到全域性的Vue中，這樣就一次性完成了所有自定義元件的載入，非常方便。

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

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

3.建立自定義元件

這裡以一個簡單封裝的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"],//接收父元件資料
 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.建立index.js，用來匯出所有自定義元件。

import turns from './turns.vue'

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

export default loading;

其實到這裡元件封裝就結束了，下面再演示下如何使用。

5.在main.js中，匯入並使用loading元件。

import loading from './lib/loading';

Vue.use(loading);

這樣就將元件全域性引用成功了！

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

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

通過這種方式，就能實現元件的全域性引用。

這種做的好處是對於複用性非常高的元件，省去了每次匯入的麻煩；

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

其實官方文件中已經提到了一種解決方案：

https://cn.vuejs.org/v2/guide/components-registration.html#基礎元件的自動化全域性註冊

基礎元件的自動化全域性註冊

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

所以會導致很多元件裡都會有一個包含基礎元件的長列表：

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 (或在內部使用了 webpack 的 Vue CLI 3+)，那麼就可以使用 require.context 只全域性註冊這些非常通用的基礎元件。這裡有一份可以讓你在應用入口檔案 (比如 src/main.js) 中全域性匯入基礎元件的示例程式碼：

import Vue from ‘vue' import upperFirst from ‘lodash/upperFirst'
import camelCase from ‘lodash/camelCase'

const requireComponent = require.context( // 其元件目錄的相對路徑
‘./components',// 是否查詢其子目錄 false,// 匹配基礎元件檔名的正則表示式
/Base[A-Z]\w+.(vue|js)$/ )

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

// 獲取元件的 PascalCase 命名 const componentName = upperFirst(
camelCase(
// 剝去檔名開頭的 ./ 和結尾的副檔名
fileName.replace(/^./(.*).\w+$/,‘$1')
) )

// 全域性註冊元件 Vue.component(
componentName,// 如果這個元件選項是通過 export default 匯出的，
// 那麼就會優先使用 .default，
// 否則回退到使用模組的根。
componentConfig.default || componentConfig ) })

補充知識：vue元件註冊 Vue.extend Vue.component Vue.use的使用以及元件巢狀

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

/**
 *  vue.extend用法
 *  使用基礎 Vue 構造器，建立一個“子類”。引數是一個包含元件選項的物件。
 *  注意：此例項可以掛載到根例項之外 
 */

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

let navbar = {
 template: `<div class='nav'>
     <input type="text" placeholder="請輸入關鍵字"/>
    </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'],mounted() {
  console.log(this.$parent)
 }
})
// header元件 元件呼叫 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:'我是頭部導航欄'
  }
 },mounted() {
  console.log(this.$parent)
 }
});

// vue根例項
let vm = new Vue({
 el:"#app",data:{
  name: 'Marry'
 },mounted(){
  console.log('vue根例項初始化完畢')
 }
})

console.log(vm);

以上這篇Vue 實現建立全域性元件,並且使用Vue.use() 載入方式就是小編分享給大家的全部內容了，希望能給大家一個參考，也希望大家多多支援我們。