当前位置:网站首页 > Vue.js开发 > 正文

vue插槽有哪些(vue插槽几种)




一、匿名插槽:

1.没有为插槽指定名称
2.通过slot标签可以添加匿名插槽
3.在使用组件的时候,组件中的内容会填充到所有匿名插槽的位置,所以在封装组件的时候,匿名插槽一般只有一个
4.匿名插槽可以设置默认的内容,如果没有传入内容就使用默认内容,如果传入了,就会进行覆盖
在这里插入图片描述
在这里插入图片描述




二、具名插槽:

1.为slot设置名字的插槽就称为具名插槽
2.一个封装组件中可以有多个具名插槽
3.使用:通过template标签指定内容所放置的插槽名称
4.使用简写: 或者
在这里插入图片描述在这里插入图片描述



三、作用域插槽

在封装组件的过程中,可以为预留的 插槽绑定 props 数据(除了name),这种带有 props 数据的 叫做“作用域插槽"

 
   

使用作用域插槽:在使用包含作用域插槽的组件时,可以使用 v-slot: 插槽名称 的形式,接收作用域插槽对外提供的数据

 
   

在这里插入图片描述
在这里插入图片描述
案例

将数据提供给插槽内部使用
在这里插入图片描述
拿到插槽提供的数据,默认为空对象
在这里插入图片描述


到此这篇vue插槽有哪些(vue插槽几种)的文章就介绍到这了,更多相关内容请继续浏览下面的相关推荐文章,希望大家都能在编程的领域有一番成就!

版权声明


相关文章:

  • jvm内存模型及调优(jvm内存模型jdk1.8)2025-06-30 22:45:10
  • vue2.0和3.0区别面试题(vue2.0 vue3.0)2025-06-30 22:45:10
  • 192.168.100.1随身wifi登录(192.168.100.1随身wifi登录器密码)2025-06-30 22:45:10
  • pcie5.0什么时候上市(pcie5.0 intel)2025-06-30 22:45:10
  • 安装nodemodules命令报错安装vue-loader(安装node_modules)2025-06-30 22:45:10
  • swagger2作用(swagger 2.0)2025-06-30 22:45:10
  • dist反编译 vue(vue打包后dist反编译)2025-06-30 22:45:10
  • vue插槽(vue插槽的理解)2025-06-30 22:45:10
  • ubuntu更换源命令(ubuntu18.04更换源)2025-06-30 22:45:10
  • 数电票纳税人端打印控件V1.6(数电票纳税人端打印控件V1.6怎么安装)2025-06-30 22:45:10
  • 全屏图片