如何从外部对组件调用某些操作？

如何解决如何从外部对组件调用某些操作？

我正在为 VuePress 构建一个简单的反馈收集组件。我将它“打包”为一个插件，因为我认为这是正确的做法。 该插件非常简单，包括：

• FeedbackCollector.vue - 在页面底部显示反馈按钮的 Vue 组件。点击后，会出现一个面板，向用户提出一些问题

• index.js：

const path = require('path')

module.exports = {
    name: 'feedback-flyout',enhanceAppFiles: [
        path.resolve(__dirname,'enhanceAppFile.js')
    ],globalUIComponents: 'FeedbackCollector'
}

• enhanceAppFile.js：

import FeedbackCollector from './FeedbackCollector.vue'

export default ({ Vue }) => {
  Vue.component('FeedbackCollector',FeedbackCollector)
}

有了这组文件，我就有了基本功能：我的组件显示在我的 VuePress 站点的每个页面上。 现在，问题是我希望有时能够自动打开反馈面板，而无需用户单击按钮。我会向我的组件 openPanel 添加一个方法。如何从外部调用该方法？那个“外部”可能是我插件中的另一个 JS 文件，它会检查一些 cookie，如果用户以前从未见过，则打开面板。

怎么做？

1. 如何将新的 JS 文件添加到我的插件中？我的意思是，如何在我的网站加载时运行此文件中的代码？如何让它在用户导航到我网站上的不同文档时运行？
2. 如何从该新文件调用 openPanel 中定义的 FeedbackCollector.vue 方法？

或者也许还有其他比我提议的更好的方法来做到这一点？ 感谢您的帮助！

解决方法

1. 要执行检查，我认为您可以使用 lifecycle hooks。例如，您可以在每次更新 Vue 实例时触发检查功能。

生命周期钩子在 enhanceApp.js 文件中定义。详细信息在 documentation 中。

例如，要定义我上面评论的更新挂钩，您可以将 enhanceApp.js 文件编码为

export default ({ Vue,options }) => {
  options['updated'] = function () {
    // your check function
  }
}

2. 我认为您可以通过在 Vue 实例中定义一个状态变量以及设置和读取此变量的方法来解决这个问题。您的检查功能将设置变量状态。您的组件将读取变量并相应地打开/关闭面板。 Vue documentation 提供了一个简单的状态管理示例。

要定义状态变量和管理它的方法，您可以阅读 documentation on data and methods。请记住，Vue 实例在 enhanceApp.js 文件中的 vuepress 上可用。要访问组件内的 Vue 实例，call the $root property.