Nuxt中如何为循环Card组件绑定独立ModalsComponent及传递props

一、单独控制每个卡片的弹窗 #

当前问题源于所有卡片共用同一个全局布尔变量deleteModalOpen，导致点击任意卡片都会触发所有弹窗。解决核心是让父组件跟踪当前需要打开弹窗的卡片唯一ID，而非用单一状态控制全部。

父组件修改步骤： #

1. 替换全局布尔变量为卡片ID跟踪变量：

// 父组件的data/setup中
data() {
  return {
    activeDeleteCardId: null, // 初始为null，无弹窗打开
    newCardModalOpen: false
  }
}

2. 更新CardComponent的绑定参数：

<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"
  :deleteModalOpen="activeDeleteCardId === card.urlsId" // 仅匹配当前卡片ID时显示弹窗
  @onOpenDeleteModal="openDeleteModal(card.urlsId)"
  @onCloseDeleteModal="closeDeleteModal()"
  @onDeleteCard="handleCardDelete"
/>

3. 添加弹窗控制方法：

methods: {
  openDeleteModal(cardId) {
    this.activeDeleteCardId = cardId
    this.newCardModalOpen = false
  },
  closeDeleteModal() {
    this.activeDeleteCardId = null
  },
  handleCardDelete(cardRefs) {
    // 这里写删除卡片的逻辑，比如调用API删除对应dbRef/mediaRef的卡片
    console.log('删除卡片：', cardRefs)
  }
}

CardComponent修改步骤： #

<template>
  <div class="cards">
    <ModalsComponent
      v-if="deleteModalOpen"
      :deleteModal="true"
      :dbRef="dbRef" <!-- 传递当前卡片的dbRef给弹窗 -->
      :mediaRef="mediaRef" <!-- 传递当前卡片的mediaRef给弹窗 -->
      @closeModal="$emit('onCloseDeleteModal')"
      @onDeleteCard="$emit('onDeleteCard', { dbRef, mediaRef })"
    />
    <v-card class="card-container">
      <div class="delete-btn">
        <v-btn
          v-if="deleteBtn"
          class="mx-2"
          fab
          dark
          small
          @click="$emit('onOpenDeleteModal')"
        >
          <v-icon dark> mdi-delete </v-icon>
        </v-btn>
      </div>
      <!-- 其余卡片内容保持不变 -->
      <ImageSlider
        v-if="imagesWithSlider"
        :imagesArray="cardImages"
        :arrowBtns="false"
      />
      <v-img v-else></v-img>
      <div class="text-container">
        <h3 class="card-title">{{ cardTitle }}</h3>
        <p class="card-description">{{ cardDescription }}</p>
      </div>
    </v-card>
  </div>
</template>

<script>
export default {
  props: ['deleteModalOpen', 'dbRef', 'mediaRef', 'cardImages', 'cardTitle', 'cardDescription', 'deleteBtn', 'imagesWithSlider']
}
</script>

二、向第三层子组件传递Props #

如果ModalsComponent内部还有第三层子组件（比如弹窗内的确认按钮组件），推荐两种传递方式：

方式1：逐层传递Props（逻辑清晰，推荐） #

以第三层组件DeleteConfirmComponent为例，在ModalsComponent中接收上层props，再向下传递：

<!-- ModalsComponent代码 -->
<template>
  <v-modal>
    <!-- 第三层子组件 -->
    <DeleteConfirmComponent
      :dbRef="dbRef"
      :mediaRef="mediaRef"
      @confirm="$emit('onDeleteCard')"
      @cancel="$emit('closeModal')"
    />
  </v-modal>
</template>

<script>
export default {
  props: ['deleteModal', 'dbRef', 'mediaRef'],
  emits: ['closeModal', 'onDeleteCard']
}
</script>

方式2：Provide/Inject（适合层级极深场景） #

若组件层级超过3层，逐层传递繁琐，可使用Vue的provide/inject实现跨层级传递：

// 父组件中提供数据
provide() {
  return {
    getActiveDeleteCard: () => this.activeDeleteCardId
  }
}

// 第三层子组件中注入数据
export default {
  inject: ['getActiveDeleteCard'],
  computed: {
    currentActiveCardId() {
      return this.getActiveDeleteCard()
    }
  }
}

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