Vue中如何在原型上绑定方法

Question

如何指向vue实例(除了传vue实例进来)
或者有没有更好的方法

在main.js中

Vue.prototype.$baseTools = {}

Vue.prototype.$baseTools.require = function (path, data) {
  console.log(this) // 在组件中调用时,this指向$baseTools 不是指向vue实例
}

Answer 1

相比于直接修改Vue的原型我更建议通过Vue的mixins来全局修改Vue实例属性，用法如下

定义mixin

export default {
    mounted() {
        console.log('fool')
    }
    myMethod() {
        console.log('bar')
    }
}

使用mixin

<script>
import myMixin from './myMixin'
export default {
    mixins: [myMixin]
}
</script>

这样，当前组件中复用了mixin的逻辑。你这里希望通过修改原型来实现全局复用，可以使用全局mixins

// 入口文件index.js
import myMixin from './myMixin'
Vue.mixin(myMixin)

可以参考mixin的官方文档#全局混入

Answer 2

plugins/index.js

 let plugins = {
    install(Vue) {
        Vue.prototype.getNowTime = function () {
            return parseTime(new Date(),'{y}{m}{d}{h}{i}{s}')
        }
      }
}

export default plugins

main.js

import plugins from '@/plugins/index';
Vue.use(plugins);

Answer 3

你的方法

export default {
  install (Vue, options) {
    Vue.prototype.*** = function () {
    // ...
    }
  }
}

main.js

import *** from '@/***/***'
Vue.use(***)

Answer 4

方案比较多，还可以用 Object.defineProperty，好处是避免别人覆盖，也可以避免被枚举，等。

例子：

Object.defineProperty(Vue.prototype, '$app', {
  get() {
    return this;
  },
});