大前端之vue插槽slot

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了大前端之vue插槽slot相关的知识,希望对你有一定的参考价值。

参考技术A

什么是插槽?
在vue中通过slot可以向组件中指定位置插入内容。

插槽的通俗理解就是是“占坑”,在组件模板中占好了位置,当使用该组件标签时候,组件标签里面的内容就会自动填坑(替换组件模板中<slot>位置),当插槽也就是坑<slot name=”mySlot”>有命名时,组件标签中使用属性slot=”mySlot”的元素就会替换该对应位置内容。

首先是单个插槽,单个插槽是vue的官方叫法,但是其实也可以叫它默认插槽,或者与具名插槽相对,我们可以叫它匿名插槽。因为它不用设置name属性。
单个插槽可以放在组件任意位置, 但是一个组件有且只能有一个单个插槽 ,相对应的,具名插槽就可以有很多个。

匿名插槽没有name属性,所以是匿名插槽,那么,插槽加了name属性,就变成了具名插槽。具名插槽可以在一个组件中出现N次,出现在不同的位置。下面的例子,就是一个有两个具名插槽和单个插槽的组件,这三个插槽被父组件用同一套css样式显示了出来,不同的是内容上略有区别。

匿名插槽和具名插槽都是在父组件中定义内容与样式,子组件只是负责放在哪。但是如果子组件提供数据,那这样的话需要子组件的<slot>把数据传递给父组件,父组件只需要提供样式即可。

在 2.6.0 中,我们为具名插槽和作用域插槽引入了一个新的统一的语法 (即 v-slot 指令)。它取代了 slot 和 slot-scope 这两个目前已被废弃但未被移除且仍在 文档中 的 attribute。

以上是关于大前端之vue插槽slot的主要内容,如果未能解决你的问题,请参考以下文章

Vue插槽详解 | 什么是插槽?

Vue第四天学习笔记之组件化高级

31 Vue组件中Slot插槽的使用1

VUE前进之路插槽的使用

Vue 开发之插槽(slot)的理解和使用

vue之插槽slot