Vue.js点击子组件链接隐藏搜索栏的实现问题

问题分析 #

导致事件未生效的核心原因有三点：

1. nuxt-link事件优先级冲突：点击nuxt-link会立即触发路由跳转，可能导致$emit事件还未被父组件处理就被中断。
2. Props定义不规范：home-search-bar-app组件中Props的默认值写法不符合Vue规范，造成属性绑定异常。
3. 事件传递冗余：已使用.sync修饰符的情况下，无需额外自定义close事件，可直接利用Vue原生的同步逻辑。

分步解决方案 #

1. 重构home-book-link组件的点击逻辑 #

替换nuxt-link为普通容器，手动控制事件执行顺序和路由跳转，确保关闭事件先完成：

<template>
  <div>
    <div v-if="items && items.length > 0">
      <div 
        @click="handleBookClick(item.id)" 
        class="d-flex align-center pb-4 pr-2" 
        v-for="item in items" 
        :key="item.id"
      >
        <v-img width="30" height="44" contain :src="item.image" class="bookImage" />
        <div class="mr-3 text-right">
          <span class="body4-medium" style="color: #262626">{{ item.title }} / </span>
          <span class="body4-medium" style="color: #262626" v-for="(associate, index) in item.associates.author" :key="associate.id">
            {{ associate.title }}
            {{ index < item.associates.author.length - 1 ? ', ' : '' }}
          </span>
          <span class="caption3-regular s60--text d-block" v-for="associate in item.associates.category" :key="associate.id">{{ associate.title }}</span>
        </div>
      </div>
    </div>
    <div v-else class="body1-medium text-center mt-4">نتیجه ای یافت نشد.</div>
  </div>
</template>

<script>
export default {
  name: "bookLink",
  props: ['items'],
  methods: {
    handleBookClick(bookId) {
      // 先触发关闭搜索栏事件
      this.$emit('closeSearchBar');
      // 手动执行路由跳转，确保事件已被父组件处理
      this.$router.push(`/books/${bookId}`);
    },
  },
}
</script>

2. 修正home-search-bar-app组件的Props和事件 #

规范Props定义，并利用.sync修饰符的原生同步事件简化逻辑：

<template>
  <v-card class="borderRadius-4 pa-2" style="box-shadow: 0px 0px 8px rgba(145, 145, 145, 0.15) !important">
    <v-row class="ma-0">
      <v-col cols="12">
        <v-tabs v-model="tabs" color="#091E42">
          <v-tab href="#all">همه</v-tab>
          <v-tab href="#book">نام کتاب</v-tab>
          <v-tab href="#category">موضوع</v-tab>
          <v-tab href="#editor">نام نویسنده</v-tab>
        </v-tabs>
        <x-hr />
      </v-col>

      <v-col cols="8">
        <div>
          <v-tabs-items v-model="tabs">
            <v-tab-item value="all">
              <home-book-link v-if="allBookLoadig" :items="allSearchResult" @closeSearchBar="closeSearchBar" />
            </v-tab-item>

            <v-tab-item value="book">
              <home-book-link v-if="bookNameLoading" :items="bookNameSearchResult" @closeSearchBar="closeSearchBar" />
            </v-tab-item>
            
            <v-tab-item value="category">
              <home-book-link v-if="categoryLoading" :items="categorySearchResult" @closeSearchBar="closeSearchBar" />
            </v-tab-item>
            <v-tab-item value="editor">
              <home-book-link v-if="authorLoading" :items="authorSearchResult" @closeSearchBar="closeSearchBar" />
            </v-tab-item>
          </v-tabs-items>
        </div>
      </v-col>
    </v-row>
  </v-card>
</template>

<script>
export default {
  name: "SearchBarApp",
  props: {
    toggle: {
      type: Boolean,
      default: false
    },
    searchText: {
      type: String,
      default: ''
    },
    showSearchBar: {
      type: Boolean,
      default: false
    }
  },
  methods: {
    closeSearchBar() {
      // 利用.sync修饰符的原生更新事件，直接同步父组件状态
      this.$emit('update:showSearchBar', false);
    },
  },
}
</script>

3. 简化父组件的绑定逻辑 #

移除冗余的@close事件，保留.sync修饰符即可完成状态同步：

<v-col cols="7" style="position: relative" class="px-0 mx-2">
  <x-input
    class="body3-regular serach-input"
    id="grey"
    placeholder="جستجو نام کتاب، موضوع یا نام نویسنده"
    appendIcon="mdi-magnify"
    v-model="searchText"
    @input="showSearchBar = searchText.length > 0"
  />

  <home-search-bar-app
    ref="searchBar"
    :showSearchBar.sync="showSearchBar"
    style="position: absolute;top: 90px;left: 0px"
    :search-text="searchText"
    @changeSearch="changeSearch"
    class="d-none d-sm-block w-full"
  />
</v-col>

内容的提问来源于stack exchange，提问作者faeze.fd