如何理解vue的slot
插槽(Slot)是Vue提出来的一个概念,正如名字一样,插槽用于决定将所携带的内容,插入到指定的某个位置,从而使模板分块,具有模块化的特质和更大的重用性。插槽的原理和Angular中的ng-transclude十分类似,本篇也是对所学内容做一个梳理。
形式上看,Slot的设计对应了angular中的ng-tranclude属性,即用该方法来确定在何处放置嵌入部分。
1.ng-transclude使用
html内容
<my-msg>{{msg}}</my-msg>
模版内容
<div>
<p>Here comes the message.</p>
<div ng-transclude></div>
</div>
渲染结果
<div>
<p>Here comes the message.</p>
{{msg}}
</div>
2.Slot的使用
匿名slot
举个栗子,在Vue中,我们会这么写带slot的组件:
子组件模板
<div>
<h2>我是子组件的标题</h2>
<slot></slot> /*这里插入父组件在引用子组件内部的内容*/
</div>
父组件模板
<div>
<h1>我是父组件的标题</h1>
<my-component>
<p>这是一些初始内容</p>
<p>这是更多的初始内容</p>
</my-component>
</div>
渲染结构
<div>
<h1>我是父组件的标题</h1>
<div>
<h2>我是子组件的标题</h2>
<p>这是一些初始内容</p>
<p>这是更多的初始内容</p>
</div>
</div>
对比一下,是不是和ng-transclude十分类似?Slot所做的工作,也是把父组件中的“内容”被放入了slot,并将组合后的组件模版返回到父组件。这里slot标签里的内容实际并没有显示,被当作了备用内容(只有在宿主元素为空,没有要插入的内容时才显示)。
更进一步地,Vue给出了具名Slot也作用域插槽这两个比较独特的设计。
具名slot
上面栗子中使用的是匿名slot,即该节点不携带任何其也特征信息。对应的,Vue也提供了具名slot。简单来讲,具名Slot就是会为模板中不同部分指定相应的插入位置。但是当部分内容没有找到对应的插入位置,就会依次插入匿名的slot中,当没有找到匿名slot时,这段内容就会被抛弃掉。
子组件模版
<div>
<slot name="header"></slot>
<slot name="footer"></slot>
<slot></slot>
</div>
父组件模板
<my-component>
<p>Lack of anonymous slot, this paragraph will not shown.</p>
<p slot="footer">Here comes the footer content</p>
<p slot="header">Here comes the header content</p>
</my-component>
渲染结果
<div>
<p>Here comes the header content</p>
<p>Here comes the footer content</p>
<p>Lack of anonymous slot, this paragraph will not shown.</p>
</div>