• 欢迎光临~

slot插槽

开发技术 开发技术 2022-08-05 次浏览

一、插槽的基本使用

1、个人通俗理解:

slot相当于给子组件挖出了一个槽,可以用来填充内容。

父组件中调用子组件时,子组件标签之间的内容元素就是要放置的内容,它会把 slot 标签替换掉。

2、官网解释

https://staging-cn.vuejs.org/guide/components/slots.html#named-slots

二、具名插槽

1.适用场景

很多时候我们子组件中都不止只有一个 slot,比如一个组件,我们可能允许调用时同时传入 name age addres 等等,这个时候如果子组件中只有一个 slot,那么为了一一对应渲染 可以分别给 slot 和内容都加上一个名字,插入插槽的时候按照名字一一对应

官网图解很清晰 v-slot:name该指令需要作用在 template 元素上(简写为#name)(不写插槽名的默认为default)

slot插槽

 

三、动态插槽名

1.适用场景

具名插槽给插槽命名的时候都是直接写死的,但大多数情况下我们都需要动态给插槽命名

直接用[动态名 ]即可

slot插槽

 

 四、作用域插槽

1.适用场景

其实插槽的使用有点类似于父子组件传递,只不过插槽传递的是模板内容,当我们想传递数据时 就可以像prop那样 向一个插槽的插口上传递 attribute:

子组件:

slot插槽

 

 父组件接收时通过v-slot组件接收到的是一个prop 对象

slot插槽

 

 可以将作用域插槽类比为一个传入子组件的函数。子组件会将相应的 prop 作为参数去调用它

官方图解

slot插槽

 

 五、具名作用域插槽

1.适用情景

顾名思义,就是想一对一具体的渲染数据处理数据,插槽 props 可以作为 v-slot 指令的值被访问到:v-slot:name="slotProps",缩写为#name="slotProps"(v-slot="slotProps" 可以类比这里的函数签名,和函数的参数类似,我们也可以在 v-slot 中使用解构形式)

官方例子

slot插槽

 

程序员灯塔
转载请注明原文链接:slot插槽
喜欢 (0)