Vue中如何将循环子组件的props传递给父组件内的另一子组件

问题背景 #

我有三个组件：Parent、First-child（CardComponent，卡片组件）、Second-child（模态框组件）。Parent通过v-for循环渲染First-child，现在需要点击First-child的删除按钮时，打开Parent中的Second-child，并把当前点击卡片的props传递给它。

解决方案 #

步骤1：在Parent组件中添加状态管理 #

在Parent的data里新增两个状态，用来记录当前选中的卡片和控制模态框显示：

<script>
export default {
  data() {
    return {
      cards: [], // 你的卡片数据源数组
      selectedCard: null, // 存储当前点击的卡片数据
      deleteModalVisible: false // 控制删除模态框的显示/隐藏
    }
  }
}
</script>

步骤2：修改First-child的删除按钮事件，传递卡片数据 #

在First-child的删除按钮点击时，把当前卡片的核心props通过emit传递给Parent：

<!-- First-child模板部分修改 -->
<v-btn
  v-if="deleteBtn"
  class="mx-2"
  fab
  dark
  small
  @click="$emit('onOpenDeleteModal', {
    cardImages,
    cardTitle,
    cardDescription,
    mediaRef,
    dbRef
  })"
>
  <v-icon dark> mdi-delete </v-icon>
</v-btn>

同步更新First-child的emits定义（确保语法合规）：

emits: ['onOpenDeleteModal', 'onCloseDeleteModal'],

步骤3：在Parent中监听事件并渲染Second-child #

修改Parent中CardComponent的调用代码，添加事件监听；同时在Parent中渲染Second-child，绑定状态和事件：

<!-- Parent模板部分 -->
<CardComponent
  v-for="card of cards"
  :key="card.urlsId"
  :cardImages="card.images"
  :cardTitle="card.title"
  :cardDescription="card.description"
  :mediaRef="card.urlsId"
  :dbRef="card.dbId"
  :deleteBtn="true"
  :imagesWithSlider="true"
  @onOpenDeleteModal="handleOpenDeleteModal"
/>

<!-- 渲染Second-child模态框 -->
<SecondChild
  :deleteModal="deleteModalVisible"
  :currentCard="selectedCard"
  @closeModal="deleteModalVisible = false"
  @onDeleteCard="handleDeleteCard"
/>

在Parent的methods中添加事件处理函数：

methods: {
  handleOpenDeleteModal(cardData) {
    this.selectedCard = cardData
    this.deleteModalVisible = true
  },
  async handleDeleteCard() {
    // 这里使用this.selectedCard中的数据执行删除逻辑
    // 示例：删除数据库中对应条目
    // await this.$fire.database.ref('albums/cards').child(this.selectedCard.dbRef).remove()
    
    // 完成删除后重置状态
    this.deleteModalVisible = false
    this.selectedCard = null
  }
}

步骤4：修改Second-child组件，接收卡片数据 #

在Second-child的props中新增currentCard，用来接收传递过来的卡片数据：

// Second-child的props部分修改
props: {
  addCardModal: {
    type: Boolean,
  },
  deleteModal: {
    type: Boolean,
  },
  currentCard: {
    type: Object,
    default: null
  }
},

如果需要在模态框中显示当前卡片的信息（比如标题），可以直接使用currentCard：

<!-- Second-child的删除模态框部分修改 -->
<div v-if="deleteModal" class="modal-delete">
  <h3>确定要删除 "{{ currentCard?.cardTitle }}" 吗？</h3>
  <div class="modal-delete-btns">
    <v-btn @click="$emit('closeModal')">取消</v-btn>
    <v-btn color="error" @click="$emit('onDeleteCard')">删除</v-btn>
  </div>
</div>

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