插槽的分类和使用方法详解

本文详细介绍了Vue.js中的默认插槽、具名插槽以及作用域插槽的概念和用法,重点讲解了它们在组件间的通信和结构定制中的应用,包括如何通过插槽进行父子组件的数据传递。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

插槽其实只分类两种:默认插槽和具名插槽

1、默认插槽

组件内定制一处结构
在子组件内写入标签,然后父组件引入子组件的标签里面写入的内容就能直接展示在标签里面
在这里插入图片描述

2、具名插槽

组件内定制多处结构,可以取名字来区分
在父组件引入的子组件标签里写入<template #插槽命名>标签
在这里插入图片描述

3、作用域插槽

不属于插槽的分类,他是插槽的一种传参语法
基本使用步骤:

  1. 给slot标签,以添加属性的方式传值 :
  2. 所有添加的属性,都会被收集到一个对象中:{ id:3, msg:‘测试文本’ }
  3. 在template中,通过‘#插槽名=“obj”’接收,默认插槽名为default
    在这里插入图片描述

案例中:删除和查看是利用默认插槽插入的,但是子组件又要将值传给父组件的插槽位置标签上传的值,都被一个对象接收

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值