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獲取子組件傳遞過來的插槽屬性

註意：

• 屬性只能在插槽內部才能獲取
• 具名插槽寫法

演示