javascript - 如何响应式地扩展 Vue.prototype

Question

我正在尝试编写一个简单的插件。这是为任何元素添加链式 react 的指令。到目前为止，自定义指令工作正常(检查 here )，但我想向 Vue 实例添加一些数据，以便用户可以全局修改一些值。我希望它像这样使用。

new Vue({
  ripple: {
    color: '#f18c16'
  }
})

在这种情况下，这将修改所有波纹指令的颜色。据我所知，这没有记录在案，所以我检查了一些 Vue 插件，然后找到了这段代码。

const ripple = {
    color: '#000'
}
const init = Vue.prototype._init

Vue.prototype._init = function(options) {
    options = options || {}
    Vue.util.defineReactive(this, '$ripple', ripple)
  init.call(this, options)
}

在我的指令中我这样使用它

  if (this.modifiers.white) {
    point.style['background-color'] = '#fff'
  } else {
    point.style['background-color'] = this.vm.$ripple.color
  }

但这只会将 $ripple 属性添加到我的 Vue 实例，而我预期的声明不起作用。检查here .所以，我的问题是如何使用为我的指令定义的 ripple 选项？有没有官方/标准的方法来做到这一点？

Answer 1

您不需要定义 react 性。

只需使用这个:

this.vm.$options.ripple.color

而不是这个:

this.vm.$ripple.color

https://jsfiddle.net/pespantelis/tzw9ho3k/6/