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

发布于07月25日

这是我的应用程序

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

这是我的路由，router-view包含三个部分.

[
  {
    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,
    },
  }
]

我只想将自定义事件绑定到search个组件，我应该怎么做.

推荐答案

我认为最好的方法是使用inject/provide模式:

在App.vue:

<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>