插件

1.基本语法

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

注册插件需要在main.js中使用app.use()注册

use(plugin: Plugin, ...options: any[]): this

参数：

• plugin：一个对象，里面需包含一个install(app,options)函数
  • app：createApp()创建的实例
  • 第二个参数往后，分别接受app.use()第二个参数往后的参数
• options：第二个参数往后，都是注册插件时，传递给install()函数的配置参数

返回值：返回createApp()创建的实例app本身，因此可以链式调用

main.js

import { createApp } from 'vue'

const app = createApp({})

const myPlugin = {		// 创建插件
  install(app, num1,num2) {}
}

app.use(myPlugin, 123,456)  // 注册插件

2.插件的使用

插件发挥作用的常见场景主要包括以下几种：

• 通过 app.component() 和 app.directive() 注册一到多个全局组件或自定义指令。
• 通过 app.provide() 使一个资源可被注入进整个应用。
• 向 app.config.globalProperties 中添加一些全局实例属性或方法
• 一个可能上述三种都包含了的功能库 (例如 vue-router)。

import { createApp } from 'vue'

const app = createApp({})

const myPlugin = {
    install(app, num1,num2) {
        app.directive('myDir',{						// 注册一个全局指令
            mounted(){
                console.log('自定义指令被调用')
            }
        })
        
        app.component('myButton',{					// 注册一个全局组件
            template:`<button><slot></slot></button>`
        })
        
        app.provide('message','hello')  // 注入一个全局数据

        app.config.globalProperties.$appName='ikun框架'		// 注册全局属性
        app.config.globalProperties.show=()=>{				// 注册全局方法
            alert('唱、跳、rap、篮球')
        }
        console.log(num1,num2)  //配置的自定义参数可根据需要使用
    }
}

app.use(myPlugin, 123,456)		// 注册插件

app.mount('#app')

被app.use()注册的指令、组件等，在组件中不需要导入，可以直接使用

<template>
  <div>
    <MyButton v-my-dir @click="show">MyButton</MyButton>	<!-- 使用全局组件、指令、方法 -->
    <div>{{ message }}</div>		<!-- 使用全局注入 -->
    <div>{{ $appName }}</div>		<!-- 使用全局属性 -->
  </div>
</template>

<script setup>
import { inject } from 'vue'
const message = inject( 'message' )
</script>