Qu'est-ce qu'un plug-in personnalisé vue3 ? Dans quels scénarios est-il utilisé ? Comment l'utiliser ?

Le scénario de rôle du plug-in

Dans l'article sur le plug-in vue2, nous avons présenté que le plug-in est en fait une fonction améliorée de vue. Habituellement utilisé pour ajouter des fonctions globales à vue. Les fonctions des plug-ins dans vue3 sont également les mêmes, mais leur définition est différente.

• Enregistrez un ou plusieurs composants globaux ou directives personnalisées via app.component() et app.directive()

#🎜🎜 ## 🎜🎜#Permettre à une ressource d'être injectée dans l'ensemble de l'application via app.provide()
Ajouter des propriétés ou des méthodes d'instance globale à app.config.globalProperties #🎜 🎜#

• Une bibliothèque de fonctions (telle que vue-router) qui peut inclure les trois éléments ci-dessus

• plug- dans La définition (enregistrement)

Un plug-in peut être un plug-in qui a

options supplémentaires comme paramètres :

Ce qui suit est un plug-in J'ai défini. Pour faciliter la gestion, dans Créer un nouveau dossier plugins dans le répertoire src En fonction de la fonction du plug-in, de nombreux fichiers js peuvent être placés dans le dossier. install() 方法的对象，也可以直接是一个安装函数本身。安装函数会接收到安装它的应用实例和传递给 app.use()

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

Installation du plug-in

Nous l'installons généralement globalement, ce qui facilite l'utilisation de plusieurs composants.

// 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');

Utilisation du plug-in

Utiliser

<template>
  <div v-my-directive></div>
  <el-button @click="clicFunc">测试按钮</el-button>
</template>
<script setup>
import { getCurrentInstance } from &#39;vue&#39;;
const ctx = getCurrentInstance();
console.log(&#39;ctx&#39;, ctx);
const clicFunc = ctx.appContext.app.config.globalProperties.$myMethod();
</script>

dans le composant.

#🎜 🎜#

Provide/inject

Dans le plug-in, vous pouvez également fournir du contenu à l'utilisateur du plug-in via provide, comme ce qui suit, en passant le paramètre options à l'utilisateur du plug-in, ou uniquement dans le composant.

// myPlugin.js
export  default {
  install: (app, options) => {
    // 注入一个全局可用的方法
    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">测试按钮</el-button>
</template>
<script setup>
import { getCurrentInstance, inject } from &#39;vue&#39;;
const ctx = getCurrentInstance();
const hello = inject(&#39;options&#39;);
console.log(&#39;hello&#39;, hello);
const clicFunc = ctx.appContext.app.config.globalProperties.$myMethod();
</script>

L'effet est le suivant :

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!