插件

介绍

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

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

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

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

示例

/src/plugins/plugins_object.js

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

/src/plugins/plugins_function.js

export default function(app) {
  console.log(app);
}

/src/main.js

import { createApp } from 'vue'

import pluginObject from './plugins/plugins_object'
import pluginFunction from './plugins/plugins_function'

const app = createApp(App)

// 这里底层自动执行 plugin.install(app)
app.use(pluginObject)
app.use(pluginFunction)

app.mount('#app')

使用该属性

<template>
</template>

<script>
  import { getCurrentInstance } from "vue";

  export default {
    // setup 只能通过该方式获取。其他的正常使用 this 即可
    setup() {
      const instance = getCurrentInstance();
      console.log(instance.appContext.config.globalProperties.$name);
    },
    mounted() {
      console.log(this.$name);
    },
    methods: {
      foo() {
        console.log(this.$name);
      }
    }
  }
</script>