作用域插槽
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>注意：
- 属性只能在插槽内部才能获取
- 具名插槽写法
演示
本文参与 腾讯云自媒体分享计划，分享自作者个人站点/博客。
原始发表：2022-05-12，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读
目录