VueJS 如何通过props从v-for列表向子组件传递当前点击元素的专属数据

现存问题定位 #

• 模态框组件被直接写在v-for循环内部，相当于每条列表项都渲染了一个独立的模态框实例，所有实例共用同一个显示开关revele，完全不符合可复用组件的设计逻辑。
• 点击列表项时没有存储当前选中的单条帖子数据，无法精准匹配需要展示的内容。
• 没有给模态框组件传递id属性，因此组件内读取的对应值为undefined。

修改步骤 #

1. 将全局仅需渲染一次的模态框组件移出循环列表，避免重复实例化造成的状态混乱和资源浪费。
2. 在父组件中新增selectedPost状态变量，用来存储当前点击的单条帖子的完整数据，替代循环内逐次传值的逻辑。
3. 给列表项的点击事件增加传参，触发时先将当前点击的帖子对象赋值给selectedPost，再打开模态框。
4. 将selectedPost作为整体prop传递给模态框组件，组件内从这个对象上读取需要展示的各类字段。

参考实现代码 #

父组件代码 #

<template>
  <ul>
    <li v-for="post in doc.posts" :key="post.id">
      <button @click="openModal(post)">
        <div class="post">
          <img class="postImage" :src="post.media_url" alt="" />
        </div>
      </button>
    </li>
    <!-- 模态框移出循环，全局仅渲染一次 -->
    <modal
      :revele="revele"
      :toggle-modale="toggleModale"
      :post-data="selectedPost"
    ></modal>
  </ul>
</template>
<script>
export default {
  data() {
    return {
      revele: false,
      selectedPost: null,
      doc: { posts: [] }
    }
  },
  methods: {
    toggleModale() {
      this.revele = !this.revele
    },
    openModal(post) {
      this.selectedPost = post
      this.revele = true
    }
  }
}
</script>

子组件Modal代码 #

<template>
  <div v-if="revele" class="container">
    <div class="overlay" @click="toggleModale"></div>
    <div class="modal">
      <button class="btnCls" @click="toggleModale">X</button>
      <h2>帖子详情</h2>
      <div class="image"><img :src="postData.media_url" alt=""></div>
      <div class="text">{{ postData.like_count }} 赞</div>
    </div>
  </div>
</template>
<script>
export default {
  name: "modal",
  props: {
    revele: Boolean,
    toggleModale: Function,
    postData: Object
  },
  created() {
    console.log("当前展示的帖子ID为：", this.postData.id)
  }
}
</script>

优化提示：不建议直接把修改父组件状态的方法作为prop传入子组件，会破坏Vue的单向数据流规范。可以让子组件在需要关闭模态框时，通过$emit('close')触发自定义事件，由父组件监听事件后更新revele状态，代码耦合度会更低。

内容的提问来源于stack exchange，提问作者Spyke Spiegel