Vue 插件的定义和使用

1、Vue插件

Vue插件用于增强Vue，插件本质上是一个包含install方法的一个对象。

install方法的第一个参数是Vue，第二个以后的参数是插件使用者传递的数据

2、定义插件

新建一个plugins.js文件

//定义插件：一个包含install方法的对象
const obj = {
    //第一个参数是Vue，options是插件使用者传递的参数
    install(Vue,options){
        
        // 1. 添加全局过滤器
        Vue.filter(....)
    
        // 2. 添加全局指令
        Vue.directive(....)
    
        // 3. 配置全局混入(合)
        Vue.mixin(....)
    
        // 4. 添加实例方法
        Vue.prototype.$myMethod = function () {...}
        Vue.prototype.$myProperty = xxxx
    }
}
//暴露插件
export default obj

3、 插件定义案例

//定义插件，plugins.js
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()
            },
            //指令所在的模板被重新解析时
            update(element,binding){
                element.value = binding.value
            }
        })

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

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

4、使用插件

通过Vue.use( )来使用插件（全局的配置），然后就可以在其他组件里使用插件里定义的功能

//在main.js中使用插件
import Vue from 'vue'
import App from './App.vue'

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

//应用（使用）插件，并传入参数
Vue.use(plugins,1,2,3)

Vue.config.productionTip = false
new Vue({
    el:'#app',
    render: h => h(App)
})

 使用插件里定义的自定义命令

<template>
    <div>
        <h2>学生姓名：{{name}}</h2>
        <h2>学生性别：{{sex}}</h2>
        <!-- 使用了插件里定义的自定义命令 -->
        <input type="text" v-fbind:value="name">
    </div>
</template>

<script>
    export default {
        name:'Student',
        data() {
            return {
                name:'张三',
                sex:'男'
            }
        },
    }
</script>