vue3自定義插件的作用場(chǎng)景及使用示例詳解

更新時(shí)間：2023年02月23日 10:34:50 作者：元子不圓呀

這篇文章主要為大家介紹了vue3自定義插件的作用場(chǎng)景及使用示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪

插件的作用場(chǎng)景

在vue2的插件那篇文章我們介紹過(guò)插件其實(shí)就是vue的增強(qiáng)功能。通常來(lái)為vue添加全局功能的。在vue3中插件的功能也是一樣的，只是它們?cè)诙x上有所不同。

通過(guò)app.component()和app.directive()注冊(cè)一到多個(gè)全局組件或自定義指令
通過(guò)app.provide()使一個(gè)資源可被注入進(jìn)整個(gè)應(yīng)用
向app.config.globalProperties中添加一些全局實(shí)例屬性或方法
一個(gè)可能上述三種都包含了的功能庫(kù)（如vue-router）

插件的定義（注冊(cè)）

一個(gè)插件可以是一個(gè)擁有 install() 方法的對(duì)象，也可以直接是一個(gè)安裝函數(shù)本身。安裝函數(shù)會(huì)接收到安裝它的應(yīng)用實(shí)例和傳遞給 app.use() 的額外選項(xiàng)作為參數(shù)：

下面是我定義的一個(gè)插件，為了方便管理，在src目錄下新建一個(gè)plugins文件夾，根據(jù)插件的功能，文件夾里面可以放置很多js文件。

export  default {
  install: (app, options) => {
    // 注入一個(gè)全局可用的方法
    app.config.globalProperties.$myMethod = () => {
      console.log('這是插件的全局方法');
    }
    // 添加全局指令
    app.directive('my-directive', {  
      bind (el, binding, vnode, oldVnode) {  
        console.log('這是插件的全局指令'); 
      }   
    })  
  }
}

插件的安裝

我們一般是安裝在全局的，這樣方便多個(gè)組件使用。

// main.js
import { createApp } from 'vue'
import App from './App.vue'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
import myPlugin from './plugins/myPlugin'
createApp(App).use(ElementPlus).use(myPlugin).mount('#app');

插件的使用

在組件中使用

<template>
  <div v-my-directive></div>
  <el-button @click="clicFunc">測(cè)試按鈕</el-button>
</template>
<script setup>
import { getCurrentInstance } from 'vue';
const ctx = getCurrentInstance();
console.log('ctx', ctx);
const clicFunc = ctx.appContext.app.config.globalProperties.$myMethod();
</script>

效果如下：

插件中的Provide/inject

在插件中，還可以通過(guò)provide為插件用戶提供一些內(nèi)容，比如像下面這樣，將options參數(shù)再傳給插件用戶，也就是組件中。

// myPlugin.js
export  default {
  install: (app, options) => {
    // 注入一個(gè)全局可用的方法
    app.config.globalProperties.$myMethod = () => {
      console.log('這是插件的全局方法');
    }
    // 添加全局指令
    app.directive('my-directive', {  
      bind () {  
        console.log('這是插件的全局指令'); 
      }   
    })
    // 將options傳給插件用戶
    app.provide('options', options);
  }
}

// main.js
import { createApp } from 'vue'
import App from './App.vue'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
import myPlugin from './plugins/myPlugin'
createApp(App).use(ElementPlus).use(myPlugin, {
  hello: '你好呀'
}).mount('#app');

// 組件中使用
<template>
  <div v-my-directive></div>
  <el-button @click="clicFunc">測(cè)試按鈕</el-button>
</template>
<script setup>
import { getCurrentInstance, inject } from 'vue';
const ctx = getCurrentInstance();
const hello = inject('options');
console.log('hello', hello);
const clicFunc = ctx.appContext.app.config.globalProperties.$myMethod();
</script>

效果如下：