跳到主要内容

认识

2024年03月18日
柏拉文
越努力，越幸运

一、认识​

插件 (Plugins) 是一种能为 Vue 添加全局功能的工具代码。

二、语法​

2.1 安装​

import { createApp } from "vue";

const app = createApp({});

app.use(myPlugin,{
    xx: ……,
    yy: ……
});

2.2 定义​

一个插件可以是一个拥有 install() 方法的对象，也可以直接是一个安装函数本身。安装函数会接收到安装它的应用实例和传递给 app.use() 的额外选项作为参数

拥有install方法的对象:

const myPlugin = {
    install(app,options){
        const { xx,yy } = options;               // 安装时提供的配置项
        app.config.globalProperties.yyy = 'zzz'; // 供全局、任何模版使用
        app.config.globalProperties.xxx = ()=>{  // 供全局、任何模版使用

        },
        app.provide(key,value);                  // 全局注入 key 供整个应用、然和组件使用
        app.component('my-component', {         // 注册全局组件
            render(){
                return h('xxx');
            }
        });   
        app.directive('my-directive', (el,binding)=>{   // 注册全局指令

        });
    }
}

安装函数install自身:

install(app,options){
    const { xx,yy } = options;               // 安装时提供的配置项
    app.config.globalProperties.yyy = 'zzz'; // 供全局、任何模版使用
    app.config.globalProperties.xxx = ()=>{  // 供全局、任何模版使用

    },
    app.provide(key,value);                  // 全局注入 key 供整个应用、然和组件使用
    app.component('my-component', {         // 注册全局组件
        render(){
            return h('xxx');
        }
    });   
    app.directive('my-directive', (el,binding)=>{   // 注册全局指令

    });
}

2.3 使用​

<template>
  <div>
    {{ xxx(……) }}
  </div>
</template>

<script setup lang="ts">
    
import { inject } from "vue";

const key = inject('key');

</script>

三、场景​

插件没有严格定义的使用范围，但是插件发挥作用的常见场景主要包括以下几种:

  1. 通过 app.component() 和 app.directive() 注册一到多个全局组件或自定义指令

  2. 通过 app.provide() 使一个资源可被注入进整个应用。

  3. 向 app.config.globalProperties 中添加一些全局实例属性或方法

  4. 一个可能上述三种都包含了的功能库 (例如 vue-router)。