跳到主要内容

认识

2023年05月12日
柏拉文
越努力，越幸运

一、认识​

二、语法​

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 供整个应用、然和组件使用
        }
    }

  • 安装函数install自身:

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

        },
        app.provide(key,value);                  // 全局注入 key 供整个应用、然和组件使用
    }

2.3 使用​

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

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

const key = inject('key');

</script>