Nuxt3/Vue3使用NuxtLayout时emit事件无法触发布局组件方法如何解决

你的代码不生效核心是几个认知偏差：

• 给<slot>标签绑定自定义事件完全无效：<slot>只是Vue做内容分发的占位标记，既不是真实DOM也不是组件实例，根本不会接收任何抛出来的事件。
• Nuxt框架中页面和Layout组件不是普通的父子组件关系：你在页面里用defineEmits抛出的事件，不会直接传到外层的Layout组件，框架内部的渲染链路隔断了直接的事件通信。
• 额外纠正：插槽内的内容（也就是你写在<NuxtLayout>标签中间的表单部分）的父级上下文是页面组件本身，不是Layout组件，不存在事件冒泡到Layout的可能。

最适配Nuxt3逻辑的方案是用框架自带的useState做跨组件状态同步，不需要额外引入第三方库：

1. 首先修改layouts/Default.vue代码：

<template>
  <!-- 保留你原来的布局公共结构，比如导航、侧边栏等 -->
  <slot />
</template>

<script setup lang="ts">
// 定义全局共享的状态，key保持唯一即可
const sharedOpcao = useState<number>('opcao-selection')

// 监听值变化，执行你原来的接收逻辑
watch(sharedOpcao, (newVal) => {
  if (newVal) {
    console.log('oioi, 收到的值是', newVal)
    // 这里写你原本receivedOpcao里的业务逻辑就行
  }
})
</script>

2. 再修改pages/index.vue代码，删掉无效的emit相关逻辑：

<template>
<NuxtLayout>
    <el-radio-group v-model="ruleForm.opcao" @change="sentOpcao">
      <el-radio :label="1">选项1</el-radio>
      <el-radio :label="2">选项2</el-radio>
    </el-radio-group>
</NuxtLayout>
</template>
    
<script setup lang="ts">
const ruleForm = reactive({
  opcao: 1
})
// 引用和Layout里同一个key的共享状态
const sharedOpcao = useState<number>('opcao-selection')

const sentOpcao = () => {
  // 直接修改共享状态即可，Layout里的watch会自动触发
  sharedOpcao.value = ruleForm.opcao
}
</script>

如果你的场景确实要走事件发布订阅的模式，也可以自己在utils里封装一个简单的mitt事件总线，在Layout里注册监听，页面里触发事件，本质和useState方案逻辑一致，只是通信形式不同。

内容的提问来源于stack exchange，提问作者marcelo.delta