如何通过HTML类名实现提交按钮触发表格模态弹窗并跨组件传值

首先明确：直接通过HTML类名传递数据并非组件通信的最佳实践，组件间通信应遵循「数据驱动」原则，依赖共享数据源而非DOM元素。以下是具体实现方案：

1. 提取表格数据为共享数据源 #

先把app.child.html中的表格内容抽成可复用的JS数据结构，方便多组件共享：

// 可放在父组件、共享服务或全局状态中
const tableData = {
  headers: ["Tier", "Range", "Rate($)"],
  rows: [
    { tier: 1, range: "", rate: "" },
    { tier: 2, range: "", rate: "" }
  ]
};

2. 父组件处理提交逻辑，传递数据到目标组件 #

修改app.parent.html，绑定点击事件并引入子组件： #

<div class="sub">
  <a onclick="handleSubmit()">Submit</a>
</div>
<!-- 模态框组件，通过props接收数据和显示状态 -->
<modal-popup :table-data="currentTableData" :is-show="isModalOpen"></modal-popup>
<!-- 另一个用于渲染表格的组件 -->
<target-table-component :table-data="currentTableData"></target-table-component>

父组件JS逻辑： #

let isModalOpen = false;
let currentTableData = {};

function handleSubmit() {
  // 赋值共享数据源
  currentTableData = tableData;
  // 触发模态框显示
  isModalOpen = true;
  // 目标组件会自动通过props接收数据并渲染表格
}

3. 模态框组件渲染表格 #

模态框组件模板示例：

<div class="modal-overlay" v-if="isShow">
  <div class="modal-content">
    <table>
      <tr class="rw">
        <th v-for="header in tableData.headers" scope="col">{{ header }}</th>
      </tr>
      <tr class="rw" v-for="row in tableData.rows">
        <td>{{ row.tier }}</td>
        <td>{{ row.range }}</td>
        <td>{{ row.rate }}</td>
      </tr>
    </table>
  </div>
</div>

4. 目标组件渲染表格 #

目标组件模板示例：

<div class="display-table">
  <table>
    <tr class="rw">
      <th v-for="header in tableData.headers" scope="col">{{ header }}</th>
    </tr>
    <tr class="rw" v-for="row in tableData.rows">
      <td>{{ row.tier }}</td>
      <td>{{ row.range }}</td>
      <td>{{ row.rate }}</td>
    </tr>
  </table>
</div>

不推荐通过类名传递数据的原因 #

• 耦合DOM结构，一旦DOM类名或结构变化，逻辑直接失效
• 需频繁查询DOM并解析数据，性能开销大
• 违背组件化开发的「数据驱动」思想，代码难以维护和扩展

若必须基于现有DOM类名提取数据（临时方案） #

如果无法修改现有结构，可在提交时通过类名查询DOM提取数据再传递：

function handleSubmit() {
  const rows = document.querySelectorAll('.rw');
  const extractedData = { headers: [], rows: [] };

  // 提取表头
  const headerCells = rows[0].querySelectorAll('th');
  headerCells.forEach(cell => extractedData.headers.push(cell.textContent));

  // 提取行数据
  for (let i = 1; i < rows.length; i++) {
    const cells = rows[i].querySelectorAll('td');
    extractedData.rows.push({
      tier: cells[0].textContent,
      range: cells[1].textContent,
      rate: cells[2].textContent
    });
  }

  // 传递数据到模态框和目标组件
  currentTableData = extractedData;
  isModalOpen = true;
}

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