在我看来，不管你用哪种方式，一堆卡片和对话框都不太可能有显著的性能问题。你提出的两个解决方案都能很好地工作。这意味着你可以根据其他非常重要的因素来决定。
我相信第二种解决方案更好，因为它更好地封装了行为，并且不会将显示模态对话框的责任推给所有卡片的父级。它的扩展性也更好，因为如果你有稍微不同类型的模态对话框，你可以选择在不同的卡中简单地使用不同的对话框组件。您不必处理给父组件更多的责任（必须决定显示哪个对话框组件），或者处理由于需要显示不同类型的内容而必须做太多事情的一个对话框组件。
我还建议你看看portal-vue，它允许你将对话框作为卡片的一部分使用，同时在DOM中任何你需要的地方呈现它们。例如，在应用程序的根元素的末尾（甚至在父组件中）。

在我看来，更好的方法应该是这样的：

<template>
  <div>
    <div v-for="card in cards">
      <span>Card: {{ card }} </span>
      <button @click="open(card)">Open</button>
    </div>
    <dialog open v-if="cardSelected">
      CardSelected: {{ cardSelected }}
      <button @click="close">Close</button>
    </dialog>
  </div>
</template>

<script>
export default {
  name: 'app',
  data: () => ({
    cards: [1, 2, 3, 4, 5],
    cardSelected: null,
  }),
  methods: {
    open(card) {
      this.cardSelected = card;
    },
    close() {
      this.cardSelected = null;
    },
  },
};
</script>

字符串
也许对话框必须是一个不同的组件。
我认为这似乎是选项1。