Vue3使用插槽时的父子组件传值

用法见官方文档深入组件章节，插槽部分：

参考文档：

作用域插槽

有时让插槽内容能够访问子组件中才有的数据是很有用的。

需求：插槽内容能够访问子组件中才有的数据

实现

子组件

TodoList.vue

<template>
  <div v-for="(todoItem, index) in state.todoList">
    <slot :item="todoItem" :index="index"></slot>
  </div>
</template>
<script setup>
import { reactive } from @vue/reactivity

const state = reactive({
  todoList: [Feed a cat, Buy milk]
})
</script>
<style lang="less">
  
</style>

在子组件插槽上定义需要传递的属性，如上代码中的 item 和 index ; 子组件将子组件中定义的数据通过插槽属性传递给父组件;

父组件

useSlot.vue

<template>
  <div>
    <todo-list>
      <template v-slot:default="slotProps">
        <button @click="handleClick(slotProps)">{
         
  {slotProps.item}}</button>
      </template>
    </todo-list>
    <div>
      <h3>点击按钮</h3>
      <li>{
         
  {`${state.slotProps.index + 1}: ${state.slotProps.item}`}}</li>
    </div>
  </div>
</template>
<script setup>
import { reactive } from @vue/reactivity
import TodoList from ./TodoList.vue

const state = reactive({
  slotProps: {
    index: 0,
    item: default
  }
})
const handleClick = (slotProps) => {
  state.slotProps = slotProps
}
</script>
<style lang="less">
  
</style>

父组件中定义插槽属性名字slotProps 默认插槽 <template v-slot:default="slotProps"> ... 当使用具名插槽时 <template v-slot:other="slotProps"> ... 属性slotProps获取子组件传递过来的插槽属性

注意：

属性只能在插槽内部才能获取 具名插槽写法

演示