Vue笔记:插槽(Slot)使用

By
写代码

插槽(Slot)是Vue提出来的一个概念,正如名字一样,插槽用于决定将所携带的内容,插入到指定的某个位置,从而使模板分块,具有模块化的特质和更大的重用性。插槽的原理和Angular中的ng-transclude十分类似,本篇也是对所学内容做一个梳理。

Slot(插槽)分发内容

形式上看,Slot的设计对应了angular中的ng-tranclude属性,即用该方法来确定在何处放置嵌入部分。

ng-transclude使用

html内容

模版内容

渲染结果

可以看出,形式上,Angular是把ng-transclude标签替换为要使用的模板内容。

Slot的使用

匿名slot

举个栗子,在Vue中,我们会这么写带slot的组件:

组件模板

父组件模版

渲染结果

对比一下,是不是和ng-transclude十分类似?Slot所做的工作,也是把父组件中的“内容”被放入了slot,并将组合后的组件模版返回到父组件。这里slot标签里的内容实际并没有显示,被当作了备用内容(只有在宿主元素为空,没有要插入的内容时才显示)。

更进一步地,Vue给出了具名Slot也作用域插槽这两个比较独特的设计。

具名slot

上面栗子中使用的是匿名slot,即该节点不携带任何其也特征信息。对应的,Vue也提供了具名slot。简单来讲,具名Slot就是会为模板中不同部分指定相应的插入位置。但是当部分内容没有找到对应的插入位置,就会依次插入匿名的slot中,当没有找到匿名slot时,这段内容就会被抛弃掉。

组件模版

父组件模版

渲染结果

Comments: 2

  1. 看不懂,支持一个。

    01月10日
  2. 现在到处是这类,移动开发经常用到,然而我没有怎么学…

    01月16日

发表评论

电子邮件地址不会被公开。 必填项已用*标注

*

:razz: