前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >Vue3使用插槽时的父子组件传值

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

原创
作者头像
CherishTheYouth
发布2022-05-12 10:12:41
2K0
发布2022-05-12 10:12:41
举报
文章被收录于专栏:Vue技术实践

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

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

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

作用域插槽

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

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

实现

子组件

TodoList.vue

代码语言:javascript
复制
<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>
  • 在子组件插槽上定义需要传递的属性,如上代码中的 itemindex ;
  • 子组件将子组件中定义的数据通过插槽属性传递给父组件;

父组件

useSlot.vue

代码语言:javascript
复制
<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获取子组件传递过来的插槽属性

注意:

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

演示

原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。

如有侵权,请联系 cloudcommunity@tencent.com 删除。

原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。

如有侵权,请联系 cloudcommunity@tencent.com 删除。

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • Vue3使用插槽时的父子组件传值
    • 作用域插槽
      • 实现
        • 子组件
        • 父组件
        • 注意:
      • 演示
      领券
      问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档