Header.vue中触发Modal的按钮点击无响应，请求技术排查

你遇到的核心问题集中在组件传值、Vue3语法使用错误以及模态框逻辑混乱这几个方面，下面逐个说明并给出修复方案：

1. Header组件未接收openModal方法 #

Header.vue模板里绑定了@click="openModal"，但你并没有在Header组件中定义对应的props来接收父组件(App.vue)传递的openModal函数，导致点击按钮时找不到执行逻辑。

修复： 在Header.vue的<script setup>中添加props定义：

<script setup>
defineProps({
  openModal: {
    type: Function,
    required: true
  }
});
</script>

2. App.vue中<script setup>语法错误 #

Vue3的<script setup>语法里不需要用methods对象包裹函数，直接定义即可；同时this在<script setup>中不可用，this.$root.$emit这种写法完全不生效。

修复后的App.vue script部分：

<script setup>
import { ref } from 'vue';
import Header from './Header.vue';
import Board from './Board.vue';
import Modal from './Modal.vue';

const showModal = ref(false);
const title = ref('你的标题');
const columns = ref([]);

const openModal = () => {
  showModal.value = true;
};

const closeModal = () => {
  showModal.value = false;
};

const openEditModal = (data) => {
  // 这里处理你的数据逻辑
  showModal.value = true;
};
</script>

3. 模态框组件重复引用 #

Header.vue里引入了<example-modal ref="modal">，但App.vue里又单独渲染了<Modal>组件，这会导致模态框状态管理混乱。建议统一由父组件(App.vue)控制模态框的显示/隐藏，Header只负责触发打开事件。

修复： 删除Header.vue中的<example-modal ref="modal">代码。

完整修正后的代码示例 #

Header.vue #

<template>
  <nav class="navbar bg-light">
    <button class="btn btn-info" id="buttonToggleModal" @click="openModal">Create new Task</button>
  </nav>
</template>

<script setup>
defineProps({
  openModal: {
    type: Function,
    required: true
  }
});
</script>

App.vue #

<template>
  <Header :title="title" :openModal="openModal"/>
  <Board :columns="columns" />
  <Modal :show="showModal" @closeModal="closeModal" />
</template>

<script setup>
import { ref } from 'vue';
import Header from './Header.vue';
import Board from './Board.vue';
import Modal from './Modal.vue';

const title = ref('Task Manager');
const columns = ref([]);
const showModal = ref(false);

const openModal = () => {
  showModal.value = true;
};

const closeModal = () => {
  showModal.value = false;
};
</script>

自定义Modal.vue示例 #

<template>
  <div v-if="show" class="modal-overlay">
    <div class="modal-content">
      <h3>Create New Task</h3>
      <!-- 这里添加模态框的表单或内容 -->
      <button class="btn btn-secondary" @click="$emit('closeModal')">Close</button>
    </div>
  </div>
</template>

<script setup>
defineProps({
  show: {
    type: Boolean,
    default: false
  }
});

defineEmits(['closeModal']);
</script>

<style scoped>
.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
}

.modal-content {
  background-color: white;
  padding: 2rem;
  border-radius: 8px;
}
</style>

内容的提问来源于stack exchange，提问作者Avissa Taghizadeh