Vue.js Vue3如何将自定义事件绑定到路由视图中的特定组件

//App.vue
<template>
  <Header ref="header"></Header>
  <RouterView @emitDelet="deleteHeader"> 
  </RouterView>>
  <Footer></Footer>
</template>

[
  {
    path: '/home',
    name: 'home',
    component: Home,
    meta: {
      showFooter: true,
    },
  }, //
  {
    path: '/search',
    name: 'search',
    component: Search,
    meta: {
      showFooter: true,
    },
  },
  {
    path: '/Login',
    name: 'login',
    component: Login,
    meta: {
      showFooter: false,
    },
  }
]

<template>
  <Header ref="header"></Header>
  <RouterView> 
  </RouterView>>
  <Footer></Footer>
</template>
<script setup>
import { provide } from 'vue'

function deleteHeader(){
//....
}

provide('deleteHeader',deleteHeader)

</script>

<script setup>
import { inject } from 'vue'

const deleteHeader = inject('deleteHeader')

//then you could run it like `deleteHeader` instead of emit('emitDelet')
</script>

Vue.js相关问答推荐

Vue路由路径匹配行为

VueUse onClickOutside不支持右键单击

vue 3 中范围样式和深度样式的问题

nuxt.js auth 始终重定向到登录，而不是允许转到带有 auth： false 的页面，

如何使用 vuejs 在浏览器 url 中获取当前 product.id 的详细信息

Nuxt 2.15.7 的构建错误 - 无法解析 CSS @font-face URL

VueJS CKeditor5 上传图片

VueJS - 将单独的组件加载到 vue 实例中

Defer推迟执行，直到外部脚本加载到 Vue.js

Vuetify v-data-table ，如何在 HTML 中呈现标题文本？

错误 [ERR_UNSUPPORTED_ESM_URL_SCHEME]：默认 ESM 加载器仅支持文件和数据 URL - Vue 3

Vue.js：TypeError：无法设置只有 getter 的 #