Vue:自定义插件及使用

一、Vue插件有什么用

插件通常会为 Vue 添加全局功能。
所谓全局：
即不需要像组件那样，每次使用他前都需要先引入一次。对于插件只要在最开始引入一次，在任何组件就可以直接使用。（类似于我们在window上添加的方法属性那样，任何地方都可以用）
插件能实现的功能没有限制，不过常见下面几种：

1. 通过插件，添加全局方法或者属性
2. 通过插件，添加全局资源：指令/过滤器/过渡等
3. 通过插件(使用全局 mixin 方法)，添加一些组件选项
4. 通过插件,添加 Vue 实例方法，通过把它们添加到 Vue.prototype 上实现。
5. 一个库，提供自己的 API，同时提供上面提到的一个或多个功能，如 vue-router

二、插件原理

所谓vue插件其实就是一个简单的js对象而已，然后这个插件对象有一个公开属性 install ，他的值为一个函数，此函数接受两个参数。第一个参数是 Vue 构造器 , 第二个参数是一个可选的选项对象。
最会导出此插件对象以供别人使用，如下所示

//所谓vue的插件，就是一个js对象
let myplugin={
    install:function(Vue,Options){
        //在这里写插件需要实现的功能
    }
}
export default myplugin;

三、插件编写及举例

1、编写插件

//所谓vue的插件，就是一个js对象
let myplugin={
    install:function(Vue,Options){
        // 添加属性与方法
        //这里我写的$testProp等加了$符号的，表示他为vue全局的，但实际上不加也可以的，访问时也不加就行了
        Vue.prototype.$myoption='我是来自插件的属性',
        Vue.prototype.$myfn=function(){
            console.log('我是来自插件的方法')
        }
        // 添加全局混入
        Vue.mixin({
            mounted() {
                console.log('组件创建成功')
            },
        })
        // 添加全局指令
        Vue.directive('dir',{
            inserted:function(ele){
                ele.style.border='2px solid green'
            }
        })
    }
}
export default myplugin;

2、使用
使用插件的时候，在入口文件import引入，再使用use()方法使用即可

3、在子组件中访问