Vue.plugins

Function: used to enhance Vue

Essence: An object containing the install method, the first parameter of install is Vue, and the second and subsequent parameters are the data passed by the plug-in user.

Define the plugin:

	对象.install = function(Vue,optioons){
    
    
		//1.添加全局过滤器
		Vue.filter(...)
		//2.添加全局自定义指令
		Vue.directive(...)
		//3.配置全局混入
		Vue.mixin(...)
		//4.添加实例方法
		Vue.prototyppe.&myMethod = function(){
    
    ...}
		Vue.prototyppe.&myProperty = XXX
	}

Use plugin: Vue.use (imported plugin name)

实例:
Under src, in the plugins.js file at the same level as main.js:

export default {
    
    
    install(Vue, x, y, z) {
    
    
        console.log('@install', Vue, 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() {
    
    
                x: 10
            },
            methods: {
    
    
                showName() {
    
    
                    console.log(this.name);
                }
            },
        })

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

// Use the plugin
Vue.use(plugins, 1, 2, 3)