vue3 从子子级发出到顶层

Question

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

App.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方法的组件级别。我怎样才能修复它以便能够调用方法？

Answer 1

根据描述不清楚您要完成什么，但我会尝试根据标题回答，如何从嵌套的 child 组件发出?

首先，让我们介绍一些

vue3 事件发射与组件相关联，因此您可以使用事件冒泡等价于 prop drilling，但这不是一个非常可靠的解决方案。
Vue3 不再包含事件总线（就像在 Vue2 中那样），因此您需要依赖第三方库（如 mitt）进行事件订阅
您可以使用 provide/inject 使变量在 parent 和任何嵌套组件之间可用。

如果您想将 emit 与深层嵌套的组件一起使用，您可以将 mitt 实例传递到 'provide' 上下文中并添加 emit 侦听器。然后 child 组件可以使用来自 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');
}

vue3 从子子级发出到顶层

vue3 emit from sub child to top level

emit

vuejs3