开启掘金成长之旅！这是我参与「掘金日新计划 · 12 月更文挑战」的第23天，点击查看活动详情

插件

插件其实就是vue的增强功能。通常用来为 Vue 添加全局功能。

常见功能

一般有下面几种功能

添加全局方法或者 property。如: vue-custom-element
添加全局资源: 指令/过滤器/过渡等。如 vue-touch
通过全局混入来添加一些组件选项。如 vue-router
添加 Vue 实例方法，通过把它们添加到 Vue.prototype 上实现。
一个库，提供自己的 API，同时提供上面提到的一个或多个功能。如 vue-router

开发插件

开发插件也叫定义插件，主要是通过install方法来暴露的，参数：vue实例和自定义参数。不论你在install中写什么vue都会帮你执行。

export default {
  install: function(Vue) {
    console.log('Vue', Vue);
    // 1. 添加全局方法或 property  
    Vue.myGlobalMethod = function () {  
      console.log('这是插件的全局方法');
    }  

    // 2. 添加全局资源  
    Vue.directive('my-directive', {  
      bind (el, binding, vnode, oldVnode) {  
        console.log('这是插件的全局指令'); 
      }   
    })  

    // 3. 注入组件选项  
    Vue.mixin({  
      created: function () {  
        console.log('这是插件的混入');
      }   
    })  

    // 4. 添加实例方法  
    Vue.prototype.$myMethod = function (methodOptions) {  
      console.log('这是插件的实例方法');
    }
  }
}

因为第一个参数是Vue实例，因此我们可以根据自己的需求在install方法中添加很多我们需要在全局实现的功能。其实这个属性都是我们之前学习到的，只是把它们整合在一起。

使用插件

使用插件分为两种情况，全局引入和组件局部引入。

1. 全局引入

在main.js中引入并使用

import Vue from 'vue'
import App from './App.vue';
import plugin from './plugins/index';

Vue.config.productionTip = false;
Vue.use(plugin);
new Vue({
  render: h => h(App),
}).$mount('#app')

重点是引入之后再使用use绑定到Vue上。 在组件中使用

<button @click="myGlobalMethod">点我打印信息</button>
### <button @click="$myMethod">点我查看实例方法</button>

因为myGlobalMethod是绑定在Vue实例（不是vueComponent）上， $myMethod是绑定在实例上的，但是click属性值不能是$ 开头，不然浏览器会报错。

需要换成下面这种用法

<template>
  <div class="hello">
    <div v-my-directive></div>
    <button @click="clickFunc">点我打印信息</button>
    <button @click="myMethod">点我查看实例方法</button>
  </div>
</template>

<script>
import mixin from '../mixin/data';
import Vue from 'vue';
export default {
  name: 'HelloWorld',
  mixins: [mixin],
  data() {
    return {
      name: '女儿',
      msg: {
        name: '张雨彤',
        title: '我是乖乖女'
      }
    }
  },
  created() {
    console.log('组件的created');
  },
  methods: {
    clickFunc() {
      Vue.myGlobalMethod();
    },
    myMethod() {
      this.$myMethod();
    }
  }
}
</script>

效果如下：

2. 组件局部引用

组件局部引用就不需要在main.js中引入了，只需要在组件中引用即可。

<template>
  <div class="hello">
    <div v-my-directive></div>
    <button @click="clickFunc">点我打印信息</button>
    <button @click="myMethod">点我查看实例方法</button>
  </div>
</template>

<script>
import mixin from '../mixin/data';
import Vue from 'vue';
import plugin from '../plugins/index';
export default {
  name: 'HelloWorld',
  mixins: [mixin],
  data() {
    return {
      name: '女儿',
      msg: {
        name: '张雨彤',
        title: '我是乖乖女'
      }
    }
  },
  created() {
    Vue.use(plugin)
    console.log('组件的created');
  },
  methods: {
    clickFunc() {
      Vue.myGlobalMethod();
    },
    myMethod() {
      this.$myMethod();
    }
  }
}
</script>

效果如下：

局部引入插件的时候要注意你想使用插件中的哪些方法，这些方法都是在什么时候调用的，需要放在合适的生命周期中才能得到想要的效果。

vue2之插件

插件

常见功能

开发插件

使用插件

1. 全局引入

2. 组件局部引用