如何响应式扩展 Vue.prototype答案

【问题标题】：How to extend Vue.prototype reactively如何响应式扩展 Vue.prototype
【发布时间】：2016-06-14 16:21:43
【问题描述】：

我正在尝试编写一个简单的插件。这是为任何元素添加涟漪效果的指令。到目前为止，自定义指令工作正常（检查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 选项？有没有官方/标准的方式来做到这一点？

【问题讨论】：

标签： javascript vue.js

【解决方案1】：

您不需要定义反应性。

只需使用这个：

this.vm.$options.ripple.color

而不是这个：

this.vm.$ripple.color

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

【讨论】：