vue的插件使用

vue 插件
功能：用于增强Vue

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

1、定义插件：

对象.install = function(Vue,options){

　　// 1、添加全局过滤器
　　Vue.filter(....)
　　// 2、添加全局指令

　　Vue.directive(...)

　　// 3、配置全局混入

　　Vue.mixin(...)

　　// 4、添加实例方法

　　Vue.prototype.$myMethod = function(){.....}

　　Vue.prototype.$myProperty = xxx
　　}

2、使用插件：

Vue.use(对象)

 

具体使用案例

1、新建plugins.js

export default {
  // 插件必须包含一个install方法
  install(Vue) { 
    console.log('@@@install', Vue)
    // 全局过滤器
    Vue.filter('mySlice', function (value) { 
      console.log('value',value)
      return value.slice(0,4)
    })

    // 定义全局指令
    Vue.directive('fbind', {
      // 指令与元素成功绑定时（以上来就执行）
      bind(element,binding) { 
        console.log(element, binding)
        element.value = binding.value;
      },

      // 指令所在元素被插入页面时执行
      inserted(element, binding) { 
        console.log('binding',binding)
        element.focus()
      },

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

    })

    // 定义混入
    Vue.mixin({
      data() { 
        return {
          globalNum:1,
        }
      }
    })
    // 给Vue原型上添加一个方法
    Vue.prototype.$hello = () => { 
      alert('你好啊')
    }
  }
}

2、应用插件

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

// 使用插件
Vue.use(plugins)