如何在Vue作用域插槽中使用子组件的items数据？

这个问题其实是作用域插槽的典型用法场景，核心就是让子组件把内部的items数据“暴露”给父组件的插槽内容，这样你既能自定义HTML结构，又能调用子组件的items。我给你分步骤拆解：

第一步：修改子组件，把items作为插槽prop暴露 #

子组件里的插槽需要通过v-bind把内部数据绑定到插槽上，这样父组件才能拿到。比如你的子组件模板应该改成这样：

<!-- 子组件示例 -->
<template>
  <div>
    <!-- 给name为modal的插槽绑定items数据 -->
    <slot name="modal" :items="items"></slot>
  </div>
</template>

<script>
export default {
  data() {
    return {
      items: ['苹果', '香蕉', '橙子'] // 子组件自身的items数据
    }
  }
}
</script>

这里的:items="items"就是把子组件的items数据绑定到插槽的items属性上，相当于给父组件的插槽内容开了一个“数据通道”。

第二步：父组件接收插槽数据，自定义HTML结构 #

根据你用的Vue版本，写法略有不同：

Vue2 写法（对应你代码里的slot语法） #

Vue2里用slot-scope来接收插槽传递过来的数据，你可以给这个接收的数据起个名字（比如slotProps），然后通过它访问items：

<!-- 父组件示例 -->
<template>
  <ChildComponent>
    <!-- slot指定插槽名，slot-scope接收子组件传的插槽数据 -->
    <template slot="modal" slot-scope="slotProps">
      <!-- 这里可以完全自定义HTML，同时用slotProps.items循环 -->
      <ul class="custom-list">
        <li v-for="(item, index) in slotProps.items" :key="index">
          <span class="item-label">第{{ index+1 }}个：</span>
          <strong>{{ item }}</strong>
          <button @click="doSomething(item)">选择</button>
        </li>
      </ul>
    </template>
  </ChildComponent>
</template>

<script>
import ChildComponent from './ChildComponent.vue'

export default {
  components: { ChildComponent },
  methods: {
    doSomething(item) {
      console.log('你选择了：', item)
    }
  }
}
</script>

Vue3 写法（推荐，Vue3已废弃slot和slot-scope） #

Vue3用v-slot语法，支持直接解构插槽数据，写法更简洁：

<!-- 父组件Vue3写法 -->
<template>
  <ChildComponent>
    <!-- v-slot:modal 指定插槽名，{ items } 直接解构出子组件传的items -->
    <template v-slot:modal="{ items }">
      <ul class="custom-list">
        <li v-for="(item, index) in items" :key="item"> <!-- 这里建议用item本身当key（如果item唯一），比index更靠谱 -->
          <span class="item-label">第{{ index+1 }}个：</span>
          <strong>{{ item }}</strong>
          <button @click="doSomething(item)">选择</button>
        </li>
      </ul>
    </template>
  </ChildComponent>
</template>

<script setup>
import ChildComponent from './ChildComponent.vue'

const doSomething = (item) => {
  console.log('你选择了：', item)
}
</script>

原理说明 #

作用域插槽的本质就是子组件向插槽内容传递数据，父组件在使用插槽时，通过slot-scope（Vue2）或v-slot（Vue3）接收这些数据，就能在自定义的HTML结构里自由使用子组件的内部数据了，完美满足你“自定义HTML + 调用子组件items”的需求。

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