时间戳

首页 > 解决方案 > 在 Vue.js 组件之间共享功能？

javascript - 在 Vue.js 组件之间共享功能？

问题描述

在我的应用程序中，我有很多实用函数，它们可以做一些小事情，从解析字符串到制作 toast 等等。我的问题是如何在其他.vue文件中访问这些？我不想为我编写的每个新 Vue 组件重写这些函数。我可以通过将一个组件导入另一个组件来使用它们吗？（如果我没有在另一个模板中添加组件，Vue 会抱怨，这意味着我不能只导入那个 JavaScript）。如果是这样，这是一件好事/明智的事情吗？这样做的标准方法是什么？

标签： javascriptvue.js

解决方案

您可以创建插件来公开Vue. 插件文档

// group utils functions together 
Vue.prototype.$utils = {
    funcA: function () {  ...  },
    funcB: function () {  ...  }
}

或者

将它们全部移动到通用实用程序模块，src/utils.js然后每个 Vue 组件都可以根据需要导入：

// src/utils.js
const funcA = () => {
    console.log('funcA');
}

const funcB = () => {
    console.log('funcB');
}

export { funcA, funcB }

// VueComponentA.vue
import { funcA } from 'path/to/utils';

// VueComponentB.vue
import { funcB } from 'path/to/utils';

推荐阅读