我已经安装了 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');
}