Vue3中基于Props的条件模板渲染问题：汉堡菜单切换失效

核心错误点 #

1. 模板中props访问方式不规范：在Backdrop.vue和SideDrawer.vue的模板里，你用了props.clicked判断条件，但Vue 3的<script setup>语法中，defineProps定义的属性会自动暴露到模板作用域，直接用clicked即可，无需通过props对象访问。
2. 状态切换逻辑冗余易出错：你在NavBar.vue里计算!props.clicked并通过emit传递，但clicked的数据源在App.vue，应该由父组件自己管理状态切换，子组件只需触发切换事件，避免潜在的状态不一致。
3. 事件绑定写法导致参数丢失：App.vue中@toggleDrawer="toggleMenu()"的写法会直接调用函数，无法接收emit传递的参数（不过这在简化后的逻辑里可直接规避）。

修正后的代码 #

App.vue

<template>
  <NavBar @toggleDrawer="toggleMenu" />
  <BackDrop :clicked="clicked" />
  <SideDrawer :clicked="clicked" />
  <router-view></router-view>
</template>

<script>
import NavBar from './components/NavBar.vue'
import BackDrop from './components/BackDrop.vue'
import SideDrawer from './components/SideDrawer.vue'

export default {
  name: "App",
  components: { NavBar, BackDrop, SideDrawer },

  setup() {
    const clicked = ref(false);

    const toggleMenu = () => {
      clicked.value = !clicked.value;
    };
    return { clicked, toggleMenu };
  },
};
</script>

• 移除NavBar上的:clicked props传递（子组件无需知道当前状态，只需触发切换）
• 事件绑定改为@toggleDrawer="toggleMenu"（不加括号，避免参数丢失）

NavBar.vue

<template>
  <nav class="navbar">
    <!-- MORE CODE -->
    <div class="hamburger_menu" @click="toggleEvent">
      <div></div>
      <div></div>
      <div></div>
    </div>
  </nav>
</template>

<script setup>
import { defineEmits } from "vue";

const emit = defineEmits(["toggleDrawer"]);

const toggleEvent = () => {
  console.log("toggleEvent running");
  emit("toggleDrawer"); // 仅通知父组件切换，不传递状态
};
</script>

• 移除不需要的clicked props，子组件无需依赖当前状态触发切换
• emit时不再传递参数，让父组件统一管理状态

BackDrop.vue

<template>
  <div class="backdrop" v-if="clicked"></div>
</template>

<script setup>
import { defineProps } from "vue";

defineProps({
  clicked: Boolean,
});
</script>

• 移除多余的<template>占位符，直接在目标元素上加v-if
• 模板中直接用clicked替代props.clicked

SideDrawer.vue

<template>
  <div class="sidedrawer" v-if="clicked"></div>
</template>
<script setup>
import { defineProps } from "vue";
defineProps({
  clicked: Boolean,
});
</script>

• 修正模板条件判断写法，移除冗余的<template>标签

关键注意事项 #

• 单向数据流：状态统一放在父组件管理，子组件只负责触发事件或接收props渲染，不要在子组件中修改/计算状态后回传，避免数据流混乱。
• <script setup> props使用：defineProps定义的props会自动成为模板可访问变量，无需props.xxx，这是Vue 3的语法糖，让代码更简洁。

内容的提问来源于stack exchange，提问作者Eric Andre