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

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

参考文档：插槽-作用域插槽-插槽prop

作用域插槽

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

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

实现

子组件

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获取子组件传递过来的插槽属性

注意：

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

演示