主 Vue 实例中的自定义 js 库（scrollMonitor）与内部组件共享答案

【问题标题】：Custom js library(scrollMonitor) inside main Vue instance to be shared with inner components主 Vue 实例中的自定义 js 库（scrollMonitor）与内部组件共享
【发布时间】：2017-10-21 09:09:28
【问题描述】：

这是 Vue.js 问题，通常我会尝试在我的 .vue 实例中使用“scrollMonitor”功能（通过 main.js 导入），但它给了我一个典型的“this. scrollMonitor 不是函数的错误

mounted () {
    let watcher = this.$scrollMonitor(this.$refs.nicer)
}

在 main.js 中，ScrollMonitor 库似乎已正确导入（控制台显示预期内容）：

import scrollMonitor from 'scrollmonitor'
Vue.use(scrollMonitor)
console.log(scrollMonitor)

主要目标还是在 .vue 文件（在 vue 组件实例中）中使用 scrollMonitor 功能。抱歉，如果我在这里遗漏了一些愚蠢的东西-我已经在该文件中使用了其他一些库，例如 Vue-Resource，所以问题不在“文件路径”中，而是在我使用 scrollMonitor 功能的方式上，非常感谢任何帮助，谢谢！

【问题讨论】：

标签： vuejs2

【解决方案1】：

您是否正在使用普通的 javascript 库并尝试 Vue.use 它？那真的行不通。 Vue.use 仅适用于设计用于 Vue 的插件。将库导入到需要的组件中，然后在那里使用它。

scrollMonitor(this.$refs.nicer)

【讨论】：

【解决方案2】：

对于那些仍在寻找的人：有一种方法可以将纯 js 库添加到 main.js 中，然后在内部组件中全局轻松地使用它们（这与 mixins 无关）：

import scrollmonitor from 'scrollmonitor'
Object.defineProperty(Vue.prototype, '$scrollmonitor', { 
    get() {return this.$root.scrollmonitor}
})

它也应该被添加到主 Vue 数据对象中：

data () {
  return { scrollmonitor }
},

然后它可以在组件本身的 mounted() 回调（不是 created() 之一）中使用，带有 scrollmonitor它可能看起来像这样（在我的具体情况下，模板有一个带有 ref="nicer" 属性的 div，'create' 是特定于库 api 的方法）：

mounted () {    
  this.$scrollmonitor.create(this.$refs.nicer)
}

万岁，我希望有人会像我一样发现这很有用！

【讨论】：