33.Vue插件

通常我们向Vue全局添加一些功能时，会采用插件的模式，它有两种编写方式：

• 对象类型：一个对象，但是必须包含一个 install 的函数，该函数会在安装插件时执行；
• 函数类型：一个function，这个函数会在安装插件时自动执行；

插件可以完成的功能没有限制，比如下面的几种都是可以的：

• 添加全局方法或者 property，通过把它们添加到 config.globalProperties 上实现；
• 添加全局资源：指令/过滤器/过渡等；
• 通过全局 mixin 来添加一些组件选项；
• 一个库，提供自己的 API，同时提供上面提到的一个或多个功能；

插件的编写方式

• 对象方式:对象里必须有一个install属性，值为一个函数
  /plugins/plugins_objects.js

export default {
  install(app) {
    app.config.globalProperties.$name = 'coderwhy'
  }
}

• 函数方式
  /plugins/plugins_function.js

export default function(app) {
  app.config.globalProperties.$age = 18
}

注册插件
main.js

import { createApp } from "vue";
import App from "./3_otherApi/4_teleport内置组件/App.vue";
import registerDirectives from "./directives/index";
import plugins_objects from './plugins/plugins_objects'
import plugins_function from './plugins/plugins_function'
const app = createApp(App);
//注册插件
app.use(plugins_objects)
app.use(plugins_function)

app.use(registerDirectives);
app.mount("#app");

例:使用插件的方式注册全局属性

/plugins/plugins_function.js

export default function(app) {
  app.config.globalProperties.$age = 18
}

注册插件
main.js

import { createApp } from "vue";
import App from "./3_otherApi/4_teleport内置组件/App.vue";
import plugins_function from './plugins/plugins_function'
const app = createApp(App);
//注册插件
app.use(plugins_function)
app.mount("#app");

App.vue

<template>
  <!--模板中获取全局属性-->
  <div>{{$age}}</div>
</template>

<script>
import { getCurrentInstance } from "vue";
export default {
  //setup中获取全局属性
  setup() {
    //获取组件实例
    const instance = getCurrentInstance();

    console.log(
      instance.appContext.config.globalProperties.$age
    );
  },
  //optionsApi中获取全局属性
  mounted() {
    console.log( this.$age);
  },
};
</script>

<style lang="scss" scoped></style>

此文档主要内容来源于王红元老师的vue3+ts视频教程