（二十七）Vue之插件

Vue学习目录

上一篇：（二十六）Vue之mixin混入/合

下一篇：（二十八）Vue组件的样式

插件

插件通常用来为 Vue 添加全局功能（增强Vue）。插件的功能范围没有严格的限制

一般有下面几种：

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

使用方法

使用步骤：

• 第一步：声明插件
• 第二步：写插件
• 第三步：注册插件
• 第四步：使用插件

声明插件

插件一个js文件，这个js文件就是插件文件，里面包含install方法的一个对象，install的第一个参数是Vue，第二个以后的参数是插件使用者传递的数据。
如下：

export default {
    install(Vue, options){
        // 添加的内容写在这个函数里面
    }
}

写插件

需要实现什么功能只需要写在install里面即可
一般会在这里面定义全局过滤器、全局指令、全局混入（合）、添加实例方法等等。

export default {
    install(Vue, options){
        // 1. 添加全局过滤器
        Vue.filter(....)
    
        // 2. 添加全局指令
        Vue.directive(....)
    
        // 3. 配置全局混入(合)
        Vue.mixin(....)
    
        // 4. 添加全局实例方法或属性（主要给组件使用）
        Vue.prototype.$myMethod = function () {...}
        Vue.prototype.$myProperty = xxxx
        
		// 5. 添加全局方法或属性（主要给Vue使用）
		Vue.myMethod = function () {...}
		Vue.myProperty = xxxx
       }
}

注册插件

通过import引入后，然后在调用 new Vue() 之前通过 Vue.use(插件名) 注册插件；

使用组件

• 全局过滤器、指令和全局混入直接使用即可
• 添加全局实例方法或属性（主要给组件使用）
  之前在非单文件组件说过我们通过组件实例对象的原型对象可以找到Vue的实例对象，即VueComponent.prototype.proto === Vue.prototype，由于在VueComponent找不到的方法或属性，会自动从原型上找，就会找到Vue.prototype身上，即这里可以直接使用VueComponent.方法/属性，即在组件本身可以使用this.方法/属性进行使用。
• 添加全局方法或属性（主要给Vue使用）
  因为是直接添加在Vue身上的，所以可以使用Vue.方法/属性进行使用