vue自定义插件方式以及使用

方法的js

`
export default {
install: function(Vue, options) {
// 1. 添加全局方法或 property
Vue.myGlobalMethod = function() {
// 逻辑…
console.log(‘添加全局方法或’, Vue, options)
}
// 2. 添加全局资源
Vue.directive(‘my-directive’, {
bind(el, binding, vnode, oldVnode) {
// 逻辑…
console.log(‘添加全局资源’, el, binding, vnode, oldVnode)
}

})

// 3. 注入组件选项
Vue.mixin({
  data() {
    return {
      province: 'hubei',
      city: 'wuhan'
    }
  },
  created: function() {
    // 逻辑...
    console.log('注入组件选项', Vue, options)
  }

})

// 4. 添加实例方法
Vue.prototype.$myMethod = function(methodOptions) {
  // 逻辑...
  console.log('添加实例方法', methodOptions)
}

}
}
`

在main.js中

import myMethods from './myMethods/index' Vue.use(myMethods, { myoptions: 123 })

在普通页面中使用
<div v-my-directive>my-directive</div>

mounted() { this.$myMethod('我是自定义插件中的方法 !!!!') },