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

Posted 2023-02-22

【中文标题】如何调用我的 Vue.js 插件中声明的函数

【英文标题】：How invoke functions declared in my Vue.js plugins

【发布时间】：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”需要做什么？

【参考方案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。