Nuxt/Vue中@Click事件仅触发一次问题求助

架构老林

2026-7-26

问题解决方案

核心问题是Vue的单向数据流规则：子组件不能直接修改父组件传递的Prop，否则会导致父子组件状态不同步，出现无法重新唤起菜单的情况。以下是具体修复步骤：

1. 重构LoadItem.vue（子组件）

子组件仅负责接收状态、渲染菜单，关闭时通知父组件更新状态，不直接修改Prop：

<template>
  <div v-if="localShow" class="load-item-menu">
    <!-- 菜单内容 -->
    <button @click="handleClose">关闭菜单</button>
  </div>
</template>

<script setup>
import { ref, watch } from 'vue'

// 接收父组件传递的show Prop
const props = defineProps({
  show: {
    type: Boolean,
    default: false
  }
})
// 定义关闭事件，通知父组件
const emit = defineEmits(['close'])

// 定义本地状态，同步父组件的show值
const localShow = ref(props.show)
// 监听父组件Prop变化，实时更新本地状态
watch(() => props.show, (newVal) => {
  localShow.value = newVal
})

// 关闭按钮点击逻辑：触发事件让父组件更新状态
const handleClose = () => {
  emit('close')
}
</script>

2. 调整ProductGrid.vue（父组件）

父组件统一维护菜单的显示状态，负责打开/关闭的状态控制：

<template>
  <div class="product-grid">
    <!-- 商品网格内容 -->
    <button @click="openLoadItem">打开侧边菜单</button>
    <!-- 绑定状态+监听关闭事件 -->
    <LoadItem :show="isLoadItemVisible" @close="isLoadItemVisible = false" />
  </div>
</template>

<script setup>
import { ref } from 'vue'
import LoadItem from './LoadItem.vue'

// 父组件维护菜单显示状态
const isLoadItemVisible = ref(false)

// 打开菜单：直接将状态设为true
const openLoadItem = () => {
  isLoadItemVisible.value = true
}
</script>