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

Question

我正在为 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 文件，它会检查一些 cookies，如果用户以前从未见过，则打开面板。

怎么做？

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

或者也许有比我建议的更好的方法来做到这一点？ 谢谢你的帮助！

Answer 1

1. 要执行检查，我认为您可以使用生命周期钩子。 例如，您可以在每次更新 Vue 实例时触发检查 function。

生命周期挂钩在enhanceApp.js文件中定义。 有关它的详细信息在文档中。

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

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

2. 我认为你可以通过在你的 Vue 实例中定义一个 state 变量以及设置和读取这个变量的方法来解决这个问题。 您的支票 function 将设置变量 state。 您的组件将读取变量并相应地打开/关闭面板。 Vue 文档提供了一个简单的 state 管理示例。

要定义 state 变量和管理它的方法，您可以阅读有关数据和方法的文档。 请记住，Vue 实例在 vuepress 上的enhanceApp.js文件中可用。 要访问组件内的 Vue 实例， 请调用$root属性。