Vue2：插件开发

一、场景描述

给Vue项目开发插件,增强Vue的功能。

二、定义插件

export default {
	//第一个参数是Vue原型对象
    install(Vue,x,y,z){
        console.log('@@@install',Vue);
        console.log(x,y,z);
        //全局过滤器
        Vue.filter('mySlice',function(value){
            return value.slice(0,4)
        });

        //定义全局指令
        Vue.directive('fbind',{
            //指令与元素成功绑定时（一上来）
            bind(element,binding){
                element.value = binding.value
            },
            //指令所在元素被插入页面时
            inserted(element,binding){
                element.focus()
            },
            //指令所在的模板被重新解析时
            update(element,binding){
                element.value = binding.value
            }
        });

        //定义混入
        Vue.mixin({
            data() {
                return {
                    x:100,
                    y:200
                }
            },
        });

        //给Vue原型上添加一个方法（vm和vc就都能用了）
        Vue.prototype.hello = ()=>{alert('你好啊')};
    }
}

三、main.js使用插件

这样，插件中定义的过滤器、指令、函数等等，都是全局可用。

//引入插件
import plugins from "@/plugins";
//使用插件
Vue.use(plugins);
Vue.use(plugins,1,1,3);		//使用插件时，传递3个参数

四、总结

1. 功能：用于增强Vue
2. 本质：包含install方法的一个对象，install的第一个参数是Vue，第二个以后的参数是插件使用者传递的数据。
3. 定义插件：

对象.install = function (Vue, options) {
    // 1. 添加全局过滤器
    Vue.filter(....)

    // 2. 添加全局指令
    Vue.directive(....)

    // 3. 配置全局混入(合)
    Vue.mixin(....)

    // 4. 添加实例方法
    Vue.prototype.$myMethod = function () {...}
    Vue.prototype.$myProperty = xxxx
}

4. 使用插件：Vue.use()