Question

这是Vue.js的问题，通常我试图在我的.vue实例中使用'scrollMonitor'函数（通过 main.js 导入），但它给了我一个典型的'this。 scrollMonitor不是函数'error

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

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

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

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

Answer 1

对于那些仍在寻找的人：有一种方法可以将简单的js库添加到 main.js ，然后在内部组件中轻松地使用它们（这不是关于mixins）：< / p>

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

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

data () {
  return { scrollmonitor }
},

然后它可以在组件本身内的 mounted（）回调（不是 created（）一个）中使用， scrollmonitor 它可能看起来像这样（在我的特定情况下，模板有一个div，其中ref =＆＃34;更好＆＃34;属性，＆＃39; create＆＃39;是特定于库api的方法）：

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

万岁，我希望有人可能会觉得这很有用！

Answer 2

您使用普通的JavaScript库并尝试Vue.use吗？那不会真的奏效。 Vue.use仅适用于设计用于Vue的插件。将库导入需要的组件，然后在那里使用它。

scrollMonitor(this.$refs.nicer)

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

2 个答案: