使用 NuxtLayout 发出事件。 Vue3 Nuxt3

Question

我正在尝试向 Nuxt Layout 组件发送事件。

但是什么也没发生。

对当前组件进行简单的控制台测试即可。但事件并没有触发Parent组件功能（Layout）

有人可以帮忙吗？

非常感谢您的关注。

文件夹布局 Nuxtv3 默认.vue

<template>
<slot @opcao-emit="receivedOpcao" />
</template>

<script setup lang="ts">
const receivedOpcao = () => {
  console.log('oioi')
}
</script>

---

文件夹页 索引.vue

<template>
<NuxtLayout>
    <el-radio-group v-model="ruleForm.opcao" @change='sentOpcao'>
    <el-radio :label="1">
    <el-radio :label="2">
    </el-radio-group>
</NuxtLayout>
    </template>
    
    <script setup lang="ts">
    const emit = defineEmits(['opcao-emit'])
    const sentOpcao = () => {
      emit('opcao-emit', 1)
    }
    </script>

Answer 1

在你的index.vue页面上，你可以直接发出而不是在脚本中执行：

<el-radio-group v-model="ruleForm.opcao" @change="$emit('opcao-emit')">

您现在可以删除

sentOpcao()

函数，因为它是多余的，并且您的父组件应该按预期接收发射。

Answer 2

您可以使用事件总线（https://github.com/nuxt/nuxt/discussions/15950，https://www.npmjs.com/package/mitt）

在

~/plugins/<plugin-name>.ts

：

import mitt from 'mitt';

export default defineNuxtPlugin(() => {
    const emitter = mitt();

    return {
        provide: {
            activeModalsBus: {
                $on: emitter.on,
                $emit: emitter.emit,
            },
        },
    };
});

在

.vue

文件中：

const { $activeModalsBus } = useNuxtApp();

$activeModalsBus.$emit('<event-name>', ...);
$activeModalsBus.$on('<event-name>', ...);

我将我的巴士命名为

activeModalsBus

，但你可以随意命名它

Answer 3

我为此创建了一个插件...请检查https://www.npmjs.com/package/nuxt-bus