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)

 

posted @ 2023-06-05 11:47  webHYT  阅读(140)  评论(0)    收藏  举报