vuejs3 - vue3 emit 从子子级到顶层

我已经安装了 https://github.com/johndatserakis/vue-cookie-accept-decline 一个包来在我的 App.vue 中显示隐私 cookie 横幅。现在我想从我的应用程序的不同组件中调用一些方法。

应用程序.vue

<template>
  <router-view/>
  <vue-cookie-accept-decline @reset='reset'....> 
</template>

我可以通过 ref='myPanel1' 引用我的 vue-cookie-accept-decline 模板,所以我执行了以下脚本,我想通过 emit reset 调用它来恢复横幅。

setup() {
  const myPanel1 = ref({});

   reset(() => {
      myPanel1.value.removeCookie()
      myPanel1.value.init()
   });

  return {
  myPanel1,
  reset
  }
}

这种方法对我不好,因为我不知道调用 emit 方法的组件的级别。我怎样才能修复它以便能够随时调用这些方法?

回答1

根据描述,目前尚不清楚您要完成什么,但我会尝试根据标题来回答,如何从嵌套的子组件 emit ?

首先,让我们介绍一些

  • vue3 事件发射与组件相关联,因此您可以使用与 prop 钻孔等效的事件冒泡,但这不是一个非常强大的解决方案。
  • Vue3 不再包含事件总线(就像在 Vue2 中所做的那样),因此您需要依赖 3rd 方库(例如 https://www.npmjs.com/package/mitt)来进行事件订阅
  • 您可以使用 https://vuejs.org/guide/components/provide-inject.html 使变量在父组件和任何嵌套组件之间可用。

如果您想将 emit 与深度嵌套的组件一起使用,则可以将 mitt 实例传递到“提供”上下文并添加 emit 侦听器。然后子组件可以使用来自 injected 实例的发射器来通知事件。

使用 mitt 的简单示例

// parent
import { provide } from 'vue'
import mitt from 'mitt';

setup() {
  const bus = mitt();
  bus.on('my-event', ()=>{'do stuff'});
  provide('bus', bus);
}
// child
import { inject } from 'vue'

setup() {
  const bus = inject('bus');
  bus.emit('my-event', 'optional parameter');
}