如何从 vue-fullpage 包装器中的子组件调用 fullpagejs 方法？

Posted 2023-02-23

【中文标题】如何从 vue-fullpage 包装器中的子组件调用 fullpagejs 方法？

【英文标题】：How to call fullpagejs methods from child components in vue-fullpage wrapper?

【发布时间】：2020-09-08 10:30:29

【问题描述】：

我不明白你应该如何从 vue 子组件中调用 fullpagejs 方法，或者更确切地说是任何不是*** App.vue 组件的组件。

fullpage 的 vue 包装器限制您在整个应用程序中仅使用一次 fullpage 组件，因此我无法在任何子组件中使用 this.$refs.fullpage.api 调用任何方法。

我想要一些触发导航方法的可点击元素，例如嵌套在较低级别的组件中的moveTo。

作者打算如何让 vue 应用使用 App.vue 之外的方法？

我能找到的唯一可行的东西似乎相当老套；我有子组件通过 $root.children[0] 从 App.vue 调用方法。

我应该以某种方式将整页引用作为道具传递吗？

我知道道具和事件，但编写代码将事件冒泡到 4-5 层子组件似乎非常乏味。

我尝试使用单独的 vue 实例制作事件总线，但事件总线实例无权访问 App.vue 中的方法。

感觉好像错过了什么。

fullpage 是否只要求您在App.vue 中整合对 fullpage api 的所有方法调用？

【参考方案1】：

来自文档：

//where --> var vm = new Vue(...) if calling it from outside.
vm.$refs.fullpage.build();

//or, when calling it from inside the Vue component methods:
this.$refs.fullpage.build();

您还可以使用位于窗口对象中的全局对象：fullpage_api。例如：fullpage_api.moveSectionDown()。

如果您知道如何改进您的用例，请随时创建拉取请求，我很乐意将其合并到组件中！ :)