如何调用我的 Vue.js 插件中声明的函数答案

【问题标题】：How invoke functions declared in my Vue.js plugins如何调用我的 Vue.js 插件中声明的函数
【发布时间】：2019-07-05 03:27:06
【问题描述】：

我写了一个 Vue.js 插件来全局访问 Vue 函数：

const MyPlugin = {
  install (Vue, options) {
    Vue.myFunction = function () {     
      console.log('Test')
    }
  }
}
export default { MyPlugin }

并将其包含在 main.js 文件中：

import MyPlugin from './plugins/my-plugin.js'
Vue.use(MyPlugin)

但是，当我尝试从这样的 Vue 组件调用 myFunction 时：

<a href="#">
  <i class="fa fa-gears fa-fw"></i>  {{ myFunction() }} <span class="fa arrow"></span>
</a>

它给了我以下错误：

属性或方法“myFunction”未在实例上定义，但在渲染期间引用。确保此属性是反应性的，在数据选项或基于类的组件中，通过初始化属性

在 vue 组件中访问“myFunction”需要做什么？

【问题讨论】：

标签： vue.js plugins

【解决方案1】：

如果您尝试从模板访问全局方法，则它需要在 Vue 组件的实例上可用。所以你需要在Vue.prototype对象上设置myFunction函数：

install (Vue, options) {
  Vue.prototype.myFunction = function () {     
    console.log('Test')
  }
}

See the docs on writing plugins.

正如您在文档中看到的那样，在这些类型的全局函数前面加上 $ 是一种常见的约定，以便更容易地将它们与 Vue 实例上的其他方法区分开来。所以在你的情况下，最好将函数设置为Vue.prototype.$myFunction。

【讨论】：