插件

功能

用于增强Vue

本质

包含install()方法的一个对象，install(Vue, …)的第一个参数是Vue，第二个以后的参数是插件使用者传递的数据。

• 对象；
• 对象中必须包含 install()

定义插件

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

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

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

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

源码

|   App.vue
|   main.js
|   plugins.js
|
\---components
        School.vue
        Student.vue

plugins.js

/*const obj = {
    //肯定有人调 install()方法，答案：Vue
    install(){
        console.log('@@@ install')
    }
}
//默认暴露
export default obj
*/
//由于我就一个对象,那么我没必要写那么麻烦，可以简写为:
/*
//默认暴露
export default {
    //肯定有人调 install()方法，答案：Vue
    install(a){
        //控制台输出了该日志。那么就证明 插件被正确引入使用了。
        //a 我们看看a是谁? a是vm的缔造者，那个 vm构造函数!
        console.log('@@@ install', a)
    }
}
*/

//完善功能:
export default {
    install(Vue,x,y,z){
        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()

                console.log(binding.value)
            },
            //指令所在的模板被重新解析时
            update(element,binding){
                element.value = binding.value
            }
        })

        //定义混合
        Vue.mixin({
            //混合对象
            data() {
                return {
                    x:100,
                    y:200
                }
            },
        })

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

main.js

//引入Vue
import Vue from 'vue'
//引入App
import App from './App.vue'

//★    引入插件
import plugins from './plugins'

//关闭Vue的生产提示
Vue.config.productionTip = false

//★    应用（使用）插件
Vue.use(plugins,1,2,3)

//创建vm
new Vue({
    el:'#app',
    render: h => h(App)
})