我已经构建了一个带有几个命名槽的自定义元素,如下所示:
<template>
<header>
<slot name="header"></slot>
</header>
<slot name="body"></slot>
<footer>
<slot name="footer"></slot>
</footer>
</template>
我这样使用它:
<my-custom-element>
<div slot="header">
<h1>Title</h1>
<p>Description</p>
</div>
<div slot="body">
<h2>Body content</h2>
<p>Body content</p>
<p>Body content</p>
</div>
<div slot="footer">
<p>Copyright 2018</p>
<ul>
<li>Facebook</li>
<li>Twitter</li>
<li>Instagram</li>
</ul>
</div>
</my-custom-element>
但是,正如您所看到的那样,我的DOM看起来像header > div > content
,footer > div > content
等。
我想我可以使用template
元素而不是div
来摆脱不必要的(有时风格破坏)div
,不幸的是,这似乎不起作用:
<my-custom-element>
<template slot="header">
<h1>Title</h1>
<p>Description</p>
</template>
<template slot="body">
<h2>Body content</h2>
<p>Body content</p>
<p>Body content</p>
</template>
<template slot="footer">
<p>Copyright 2018</p>
<ul>
<li>Facebook</li>
<li>Twitter</li>
<li>Instagram</li>
</ul>
</template>
</my-custom-element>
有没有办法将多个元素发送到插槽而不先将它们包起来?
答案 0 :(得分:0)
好的,你可以简单地在多个元素上使用slot
属性;
<my-custom-element>
<h1 slot="header">Title</h1>
<p slot="header">Description</p>
<h2 slot="body">Body content</h2>
<p slot="body">Body content</p>
<p slot="body">Body content</p>
<p slot="footer">Copyright 2018</p>
<ul slot="footer">
<li>Facebook</li>
<li>Twitter</li>
<li>Instagram</li>
</ul>
</my-custom-element>
这是非常难以理解和繁琐的。它只是感觉不是很好的代码。能够使用template[slot]
会更好。