vue 点击按钮弹出一个框，但是要携带原先表格内选择的数据的id。请问vue3怎么写

在 Vue3 中，你可以通过事件绑定和数据驱动的方式来实现这个功能。首先，你需要有一个表格组件，其中包含一个数据列表和行点击事件处理。在每个表格行上，你可以在`v-on:click`事件中传入所选行的数据ID。这里是一个简单的例子：

<!-- 假设你的表格数据保存在data里，比如一个数组叫tableData -->
<template>
  <div>
    <table>
      <tr v-for="(item, index) in tableData" :key="index">
        <td>{{ item.name }}</td>
        <td>
          <button @click="showModal(item.id)">点击</button>
        </td>
      </tr>
    </table>
    <!-- 这里是你需要显示模态框的组件 -->
    <modal :data-id="selectedId" v-if="selectedId"></modal>
  </div>
</template>

<script>
export default {
  data() {
    return {
      selectedId: null,
    };
  },
  methods: {
    showModal(id) {
      this.selectedId = id; // 将当前行的id保存到selectedId变量中
      // 然后你可以在这里触发显示模态框的函数，例如：
      this.showModalComponent();
    },
    showModalComponent() {
      // 在modal组件内部，可以接收selectedId并展示相关的数据
    },
  },
};
</script>

在这个例子中，当用户点击某一行的按钮时，`selectedId`会被更新为点击的行的ID，并且可以根据这个ID在`showModalComponent`方法中进一步操作，如加载或修改对应的数据。