vue 关于solt得用法

solt

第一种用法

父组件

<templateSolt></templateSolt>

<templateSolt>

<p>slot分发了内容</p>

</templateSolt>

子组件

<div>

<h1>这是slot子组件</h1>

<slot>

如果slot没有分发内容。

</slot>

</div>

效果图如下

我得理解，slot在父组件有内容时，显示为父组件得内容，覆盖了子组件，如果父组件没有内容，则显示子组件

第二种用法

这种用法是我们用得比较多得，这种是具名得slot

父组件

<templateSlotNamed>

<h1 slot="footer">footer</h1>

<h1 slot="header">header</h1>

<h1>Default content</h1>

</templateSlotNamed>

子组件

<div>

<slot name="header"></slot>

<slot></slot>

<slot name="footer"></slot>

</div>

效果图如下

我把父组件的header和footer更换了位置，

是为了证明一件事，就是实际内容的显示是由子组件的位置决定的。