VueJS组件间事件触发与跨组件数据传递问题咨询

嘿，这个场景我之前在项目里也碰到过！通过父组件中转来实现子表格通知父组件打开弹窗并传递发票数据的逻辑其实挺清晰的，我给你分步骤拆解一下，不管你用Vue2还是Vue3都适用：

简单来说就是三步：

1. 点击child-table里的按钮时，向父组件触发一个自定义事件，把当前行的发票数据作为参数传过去
2. 父组件监听这个自定义事件，拿到发票数据后，更新自己的状态变量（比如弹窗的显示状态、当前选中的发票数据）
3. 父组件把这些状态变量通过Props传给child-modal，实现弹窗打开并加载对应发票数据

1. 父组件 (Parent.vue) #

父组件作为中间层，负责维护弹窗状态和发票数据，同时监听子组件的事件：

<template>
  <div class="parent-container">
    <!-- 子弹窗：绑定显示状态和发票数据，监听关闭事件 -->
    <ChildModal 
      :visible="isModalOpen" 
      :invoice="currentInvoice"
      @close="isModalOpen = false"
    />
    <!-- 子表格：监听打开弹窗的自定义事件 -->
    <ChildTable @open-invoice-modal="handleOpenModal" />
  </div>
</template>

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

// 控制弹窗显示/隐藏的响应式变量
const isModalOpen = ref(false)
// 存储当前要处理的发票数据
const currentInvoice = ref(null)

// 处理来自子表格的弹窗打开请求
const handleOpenModal = (invoiceData) => {
  currentInvoice.value = invoiceData
  isModalOpen.value = true
}
</script>

2. 子表格组件 (ChildTable.vue) #

在表格按钮的点击事件里，触发自定义事件并传递发票数据：

<template>
  <table>
    <tbody>
      <tr v-for="invoice in invoiceList" :key="invoice.id">
        <td>{{ invoice.number }}</td>
        <td>{{ invoice.amount }}</td>
        <td>
          <!-- 点击按钮通知父组件打开弹窗 -->
          <button @click="triggerOpenModal(invoice)">处理发票</button>
        </td>
      </tr>
    </tbody>
  </table>
</template>

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

// 模拟发票列表数据
const invoiceList = ref([
  { id: 1, number: 'INV-001', amount: 100 },
  { id: 2, number: 'INV-002', amount: 200 }
])

// 触发自定义事件，传递发票数据给父组件
const triggerOpenModal = (invoice) => {
  const emit = defineEmits(['open-invoice-modal'])
  emit('open-invoice-modal', invoice)
}
</script>

3. 子弹窗组件 (ChildModal.vue) #

接收父组件传递的Props，根据状态显示弹窗并使用发票数据：

<template>
  <div class="modal-overlay" v-if="visible">
    <div class="modal-content">
      <h3>处理发票</h3>
      <p>发票编号：{{ invoice?.number }}</p>
      <p>发票金额：{{ invoice?.amount }}</p>
      <button @click="$emit('close')">关闭弹窗</button>
      <!-- 这里可以添加发票处理的业务逻辑 -->
    </div>
  </div>
</template>

<script setup>
// 声明接收的Props
defineProps({
  visible: {
    type: Boolean,
    default: false
  },
  invoice: {
    type: Object,
    default: null
  }
})

// 声明要触发的关闭事件
defineEmits(['close'])
</script>

<style scoped>
.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,0.5);
  display: flex;
  justify-content: center;
  align-items: center;
}
.modal-content {
  background: white;
  padding: 2rem;
  border-radius: 8px;
}
</style>

如果项目用的是Vue2，思路完全一致，只是语法稍有不同：

1. 父组件 (Parent.vue) #

<template>
  <div class="parent-container">
    <ChildModal 
      :visible="isModalOpen" 
      :invoice="currentInvoice"
      @close="isModalOpen = false"
    />
    <ChildTable @open-invoice-modal="handleOpenModal" />
  </div>
</template>

<script>
import ChildModal from './ChildModal.vue'
import ChildTable from './ChildTable.vue'

export default {
  components: { ChildModal, ChildTable },
  data() {
    return {
      isModalOpen: false,
      currentInvoice: null
    }
  },
  methods: {
    handleOpenModal(invoiceData) {
      this.currentInvoice = invoiceData
      this.isModalOpen = true
    }
  }
}
</script>

2. 子表格组件 (ChildTable.vue) #

<template>
  <table>
    <tbody>
      <tr v-for="invoice in invoiceList" :key="invoice.id">
        <td>{{ invoice.number }}</td>
        <td>{{ invoice.amount }}</td>
        <td>
          <button @click="triggerOpenModal(invoice)">处理发票</button>
        </td>
      </tr>
    </tbody>
  </table>
</template>

<script>
export default {
  data() {
    return {
      invoiceList: [
        { id: 1, number: 'INV-001', amount: 100 },
        { id: 2, number: 'INV-002', amount: 200 }
      ]
    }
  },
  methods: {
    triggerOpenModal(invoice) {
      this.$emit('open-invoice-modal', invoice)
    }
  }
}
</script>

3. 子弹窗组件 (ChildModal.vue) #

<template>
  <div class="modal-overlay" v-if="visible">
    <div class="modal-content">
      <h3>处理发票</h3>
      <p>发票编号：{{ invoice?.number }}</p>
      <p>发票金额：{{ invoice?.amount }}</p>
      <button @click="$emit('close')">关闭弹窗</button>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    visible: {
      type: Boolean,
      default: false
    },
    invoice: {
      type: Object,
      default: null
    }
  },
  emits: ['close'] // Vue2.6+支持，旧版本可省略
}
</script>

• 子→父传数据：通过自定义事件（Vue3用defineEmits，Vue2用$emit）传递参数
• 父组件中转：父组件作为状态管理的中间层，统一维护弹窗状态和业务数据
• 父→子传数据：通过Props将父组件的状态同步给子弹窗组件

这样一套流程下来，就能完美实现你需要的子表格触发弹窗并传递发票数据的需求啦！

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