vue3 사용자 정의 플러그인이란 무엇입니까? 어떤 시나리오에서 사용되나요? 사용 방법?-View.js-php.cn

vue3 사용자 정의 플러그인이란 무엇입니까? 어떤 시나리오에서 사용되나요? 사용 방법?

王林

풀어 주다： 2023-05-10 08:06:37

앞으로

1865명이 탐색했습니다.

플러그인의 역할

vue2 플러그인 글에서 플러그인은 실제로는 vue의 향상된 기능이라고 소개했습니다. 일반적으로 vue에 전역 함수를 추가하는 데 사용됩니다. vue3의 플러그인 기능도 동일하지만 정의가 다릅니다.

app.comComponent() 및 app.directive()를 통해 하나 이상의 전역 구성 요소 또는 사용자 정의 지시문을 등록합니다.
app.provide()를 통해 리소스가 전체 애플리케이션에 주입되도록 활성화합니다.
추가 app.config.globalProperties에 대한 일부 전역 인스턴스 속성 또는 메서드
위의 세 가지를 모두 포함할 수 있는 함수 라이브러리(예: vue-router)

플러그인 정의(등록)

플러그 -in can install() 方法的对象，也可以直接是一个安装函数本身。安装函数会接收到安装它的应用实例和传递给 app.use()를 매개변수로 하는 추가 옵션입니다.

다음은 제가 정의한 플러그인입니다. 관리를 용이하게 하기 위해 플러그인의 기능에 따라 src 디렉토리에 새 플러그인 폴더를 만듭니다. 폴더에 많은 js 파일을 넣을 수 있습니다.

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

로그인 후 복사

플러그인 설치

우리는 일반적으로 전역적으로 설치하므로 여러 구성 요소를 더 쉽게 사용할 수 있습니다.

// 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).mount(&#39;#app&#39;);

로그인 후 복사

플러그인 사용

구성 요소에서

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

로그인 후 복사

을 사용하면 다음과 같은 효과가 있습니다.

vue3 사용자 정의 플러그인이란 무엇입니까? 어떤 시나리오에서 사용되나요? 사용 방법?

플러그인에 제공/주입

플러그인에서 플러그인 사용자는 다음과 같이 제공을 통해 옵션 매개변수를 플러그인 사용자, 즉 구성 요소에 전달합니다.

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

로그인 후 복사

효과는 다음과 같습니다.

vue3 사용자 정의 플러그인이란 무엇입니까? 어떤 시나리오에서 사용되나요? 사용 방법?