「 VUE3 Slot 」插槽全家桶使用详解

插槽 slot 就是子组件中提供给父组件使用的一个占位符,用 表示,父组件可以给这个占位符内填充任何模板代码,填充的内容会自动替换 标签。

插槽被分为三种:匿名插槽、具名插槽、作用域插槽。

1、匿名插槽

没有名字的插槽就是匿名插槽,组件可以放置一个或多个

子组件内放置一个插槽:

父组件使用插槽:

哈哈哈哈哈哈
// 或

如果有多个 slot 时,父组件中需要填充的内容就会被多次插入。

2、具名插槽

组件内可以放置多个插槽,如果都是匿名插槽的时候,渲染的都是父组件默认内容,无法实现插入多个不同内容,此时就需要给插槽设置名字以便于区分它们。

具名插槽就是给插槽取个名字,可以把组件内多个插槽放在不同的地方,父级填充内容时,可以根据名字把内容填充到对应的插槽内。

定义为多个插槽的组件:

父组件填充内容需要对象插槽名:


  
  
  

可以简写为:


  
  
  

3、作用域插槽

匿名插槽和具名插槽父组件只能访问父组件中编译的内容,子组件只能访问子组件内的内容,有时我们在父组件需要访问到子组件中的内容,此时 vue 给我们提供了作用域插槽。

作用域插槽子组件内定义要传送的数据:

在调用组件的父组件内接收数据:


  

4、动态插槽

有多个插槽,不同状态下展示不同的插槽,此时我们就可以使用动态插槽,插槽名是一个变量名,其值可以是动态修改的。


  

我们可以做一个类似于选项卡的效果:

父组件代码:



	

子组件代码:

此时就可以动态地选择其中任意一个插槽展示。

发表评论
留言与评论(共有 0 条评论) “”
   
验证码:

相关文章

推荐文章