您现在的位置是：首页 >学无止境 >22.vue插槽网站首页学无止境

22.vue插槽

Suyuoa 2024-06-19 13:56:23
简介22.vue插槽

目录

1  基本使用

2  name属性与v-slot

3  插槽放默认内容(后备内容)

4  插槽的自定义属性(作用域插槽)

4.1  简单使用

4.2  传data

4.3  支持解构

插槽操作就是写在组件中间的东西，其目的是增加组件在UI结构上的复用性，就像下面这样

直接写是渲染不出来的

这个时候我们可以使用插槽

1  基本使用

在LEFT.vue中加入slot标签，slot标签在哪，插槽中的内容就放在哪

App.vue保持不变

这样就可以把用户自定义的东西渲染出来了

2  name属性与v-slot

每一个插槽都需要有一个name属性，像上面我们没给name属性，他的name属性就默认为default

我们现在给两个插槽，给这两个插槽起不同的名字

  • 你可以在一个组件中放多个相同name的插槽

然后使用v-slot

  • v-slot必须在 template标签 或 自定义组件标签 中使用

v-slot可以简写为 #

3  插槽放默认内容(后备内容)

写slot标签中就行了

  • 也可以写像是标签一样的富文本

我们现在不给name为p的插槽内容

4  插槽的自定义属性(作用域插槽)

4.1  简单使用

插槽的自定义属性可以被使用者用到

  • obj是形参，名称随意

使用的时候直接用 点 使用就行了，比如obj.age

4.2  传data

借助v-bind传就行了，接收的写法不变

4.3  支持解构

风语者！平时喜欢研究各种技术，目前在从事后端开发工作，热爱生活、热爱工作。

站长推荐