Vue插件主要用于增强Vue。

定义插件

在Vue中，插件的本质是一个包含install()方法的对象。

install()方法：

  1. 参数1：Vue原型对象.
  2. 参数2 ~ n：第二个参数开始之后的参数（包括第二个）是插件使用者传递的数据。

定义一个简单的插件：

 1/**
 2 * plugins.js
 3 * Vue 插件
 4 */
 5
 6export const myPlugin = {
 7  install(Vue) {
 8    console.log('Hello my plugin!');
 9    console.log(Vue); // 获取 Vue 原型对象
10
11    /* 
12      可以在插件中使用 Vue 原型对象定义一些全局的配置
13      例如定义全局过滤器、全局指令、全局混入，在Vue原型添加方法等等...
14      甚至可以在插件中启用其它插件
15    */
16  }
17}

接收参数：

1export const plugin = {
2  install(Vue, x, y, z) {
3    console.log(x, y, z);
4  }
5}

使用插件

要使用插件需要以下两个步骤：

  1. 引入插件。
  2. 使用Vue.use()方法使插件生效。

Vue.use()方法：

  1. 参数1：要启用的插件的配置对象。
  2. 参数2 ~ n：要传递给插件的参数，这些参数会传递给插件的install()中的参数2 ~ n。

例如使用上方定义的插件：

 1/**
 2 * main.js
 3 */
 4
 5import Vue from 'vue'
 6import App from './App.vue'
 7
 8// 引入插件
 9import {myPlugin} from './plugins'
10// 使用插件
11Vue.use(myPlugin)
12
13Vue.config.productionTip = false
14
15new Vue({
16  render: h => h(App),
17}).$mount('#app')

使用时传入参数：

1Vue.use(myPlugin, 1, 2, 3)