vue 中將我們自定義的組件封裝成插件使用，真香

寫在開頭

  當我們在使用 Vue 進行開發的過程中，經常會用到一些的組件，比如 Loading（加載中提示） 、Toast（吐司彈窗） 等一些公用性很強的組件。

我們在其他組件中使用它們時，必須進行如下三步操作：

1. import toast from ‘components/Toast/xxx’
2. 在 components 中引入
3. 在 html 中使用相對應的標籤

<template>
	<div class="hello">
    	<h1>{{ msg }}</h1>
    	<!-- 第三步 -->
    	<toast></toast>
   	</div>
</template>
<script>
	// 第一步
	import toast from 'components/Toast/xxx'
	export default {
        name: "Toast",
        data() {
            return {
                message: '',
            }
        },
        components: {
        	// 第二步
			toast
		}
		// 部分代碼省略
    }
</script>

  這種公共插件很常用，在每個組件中都這樣來三個步驟，顯然太麻煩了。接下來就引出了下文的內容。我們如何將自定義的組件封裝成一個插件來供項目使用呢？

插件封裝

 我們此處以 Toast 組件爲例進行插件的封裝。

1.組件的定義

<template>
    <div class="toast" v-show="isShow">
        <div>{{message}}</div>
    </div>
</template>

<script>
    export default {
        name: "Toast",
        data() {
            return {
                message: '',
                isShow: false
            }
        },
        methods: {
        	//也可以通過ES6的方式,對參數進行默認值的設定
        	//show(message="我是默認彈窗內容", duration=1500) { }
            show(message, duration) {
                this.isShow = true;
                this.message = message;

                setTimeout(() => {
                    this.isShow = false;
                    this.message = '';
                }, duration)
            }
        }
    }
</script>

<style scoped>
    .toast {
        position: fixed;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        padding: 8px 10px;
        z-index: 999;
        border-radius:4px;
        color: #fff;
        background-color:rgba(0, 0, 0, .5);
    }
</style>

2.定義一個 index.js 文件

  與 Toast.vue 同級目錄下，定義一個 index.js 文件，目錄結構如下圖所示：
  

import Toast from './Toast'

const obj = {}

// 在調用Vue.use()方法時,會執行 install()方法
obj.install = function(Vue){
    //1.創建組件構造器
    const toastConstructor = Vue.extend(Toast);

    //2.使用new的方式,根據組件構造器，可以創建出來一個組件對象
    const toast = new toastConstructor();

    //3.將組件對象，手動掛載到某一個元素上
    toast.$mount(document.createElement('div'));

    //4.toast.$el 對應的就是 div 標籤元素
    document.body.appendChild(toast.$el);

    //5.原型方式進行掛載
    Vue.prototype.$toast = toast;

}

export default obj;

3.在 main.js 入口文件中引入Toast插件

import Vue from 'vue'
import App from './App.vue'

//1.引入自定義的 toast插件
import toast from './components/toast'
//2.安裝toast插件
Vue.use(toast);

Vue.config.productionTip = false

new Vue({
  render: h => h(App),
}).$mount('#app')

4.項目中使用

  已經將我們的組件封裝成插件，以插件的方式在項目啓動時進行了 install 安裝。所以我們便不在需要開頭提到的三部曲了。只需要一句話便可使用。

this.$toast.show("你好啊,我是彈窗", 10000);

5.測試

  我們添加一個 button 按鈕，並監聽它的 click 事件。此處 console.log(this.$toast)返回的一個 VueComponent 類型。然後簡單通過 this.$toast.show("你好啊,我是彈窗", 10000); 便能夠對我們的 toast 組件進行調用了。

<template>
    <div id="app">
        <img alt="Vue logo" src="./assets/logo.png">
        <HelloWorld msg="Welcome to Your Vue.js App"/>
        <button @click="btnClick">測試</button>
    </div>
</template>

<script>
    import HelloWorld from './components/HelloWorld.vue'

    export default {
        name: 'App',
        components: {
            HelloWorld
        },
        methods: {
            btnClick: function () {
                console.log(this.$toast)
                this.$toast.show("你好啊,我是彈窗", 10000);
            }
        }
    }
</script>

<style>
    #app {
        font-family: Avenir, Helvetica, Arial, sans-serif;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
        text-align: center;
        color: #2c3e50;
        margin-top: 60px;
    }
</style>

---

博主寫作不易，加個關注唄

求關注、求點贊，加個關注不迷路 ヾ(◍°∇°◍)ﾉﾞ

博主不能保證寫的所有知識點都正確，但是能保證純手敲，錯誤也請指出，望輕噴 Thanks♪(･ω･)ﾉ