Heim  >  Artikel  >  Web-Frontend  >  Was ist ein benutzerdefiniertes vue3-Plug-in? In welchen Szenarien wird es verwendet? Wie benutzt man es?

Was ist ein benutzerdefiniertes vue3-Plug-in? In welchen Szenarien wird es verwendet? Wie benutzt man es?

王林
王林nach vorne
2023-05-10 08:06:371850Durchsuche

Das Rollenszenario des Plug-Ins

Im Vue2-Plug-In-Artikel haben wir vorgestellt, dass das Plug-In tatsächlich eine erweiterte Funktion von Vue ist. Wird normalerweise zum Hinzufügen globaler Funktionen zu Vue verwendet. Die Funktionen von Plug-Ins in vue3 sind ebenfalls gleich, unterscheiden sich jedoch in der Definition.

  • Registrieren Sie eine oder mehrere globale Komponenten oder benutzerdefinierte Anweisungen über app.component() und app.directive()

  • #🎜🎜 ## 🎜🎜#Ermöglichen Sie die Injektion einer Ressource in die gesamte Anwendung über app.provide()
  • Fügen Sie einige globale Instanzeigenschaften oder -methoden zu app.config.globalProperties hinzu #🎜 🎜#
  • Eine Funktionsbibliothek (z. B. Vue-Router), die alle drei der oben genannten
  • plug- enthalten kann in der Definition (Registrierung)
Ein Plug-In kann ein Plug-In sein, das

zusätzliche Optionen als Parameter hat:

Das Folgende ist ein Plug-In Zur Vereinfachung der Verwaltung habe ich im Verzeichnis src einen neuen Plugins-Ordner erstellt. Abhängig von der Funktion des Plug-Ins können viele js-Dateien im Ordner abgelegt werden. 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('这是插件的全局指令'); 
      }   
    })  
  }
}

Plug-in-Installation

Wir installieren es normalerweise global, was die Verwendung mehrerer Komponenten erleichtert.

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

Verwendung des Plug-ins

Verwenden Sie

<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>

in der Komponente. Der Effekt ist wie folgt:

#🎜 🎜#

Bereitstellen/injizieren

Was ist ein benutzerdefiniertes vue3-Plug-in? In welchen Szenarien wird es verwendet? Wie benutzt man es?Im Plug-in können Sie dem Plug-in-Benutzer auch einige Inhalte durch Bereitstellen bereitstellen, wie zum Beispiel die folgende Weitergabe die Optionsparameter an den Plug-In-Benutzer oder nur in der Komponente.

// myPlugin.js
export  default {
  install: (app, options) => {
    // 注入一个全局可用的方法
    app.config.globalProperties.$myMethod = () => {
      console.log(&#39;这是插件的全局方法&#39;);
    }
    // 添加全局指令
    app.directive(&#39;my-directive&#39;, {  
      bind () {  
        console.log(&#39;这是插件的全局指令&#39;); 
      }   
    })
    // 将options传给插件用户
    app.provide(&#39;options&#39;, options);
  }
}
// main.js
import { createApp } from &#39;vue&#39;
import App from &#39;./App.vue&#39;
import ElementPlus from &#39;element-plus&#39;
import &#39;element-plus/dist/index.css&#39;
import myPlugin from &#39;./plugins/myPlugin&#39;
createApp(App).use(ElementPlus).use(myPlugin, {
  hello: &#39;你好呀&#39;
}).mount(&#39;#app&#39;);
// 组件中使用
<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>

Der Effekt ist wie folgt:

Das obige ist der detaillierte Inhalt vonWas ist ein benutzerdefiniertes vue3-Plug-in? In welchen Szenarien wird es verwendet? Wie benutzt man es?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme:
Dieser Artikel ist reproduziert unter:yisu.com. Bei Verstößen wenden Sie sich bitte an admin@php.cn löschen