Когда вы используете слоты в своих компонентах, обычно появляется пара дополнительных элементов, обертывающих ваш контент, но есть простой способ удалить их из визуализированного представления.
Общее примечание:
Я предполагаю, что у вас есть базовые знания о Синтаксисе шаблонов и Именованных слотах VueJs.
Допустим, у вас есть message-box
компонент с двумя именованными слотами (заголовок и тело):
// message-box component <template> <div class="panel"> <div class="header"> <p><slot name="title"></slot></p> </div> <div class="body"> <slot name="body"></slot> </div> </div> </template>
Теперь, когда вы используете этот компонент внутри другого:
<template> <message-box> <div slot="title">Some title</div> <div slot="body">Some content</div> </message-box> </template>
Этот компонент будет отображаться следующим образом:
<template> <div class="panel"> <div class="header"> <p><div>Some title</div></p> </div> <div class="body"> <div> <div class="body"><div>Some content</div></div> </div> </div> </div> </template>
Это нормально работает, но на самом деле вам не нужны дополнительные <div>
вокруг содержимого каждого слота:
<p><div>Some title</div></p>
Вы можете легко удалить эти<div>
оболочки с помощью зарезервированного тега <template>
.
<template> <message-box> <template slot="title">Some title</template> <template slot="body">Some content</template> </message-box> </template>
Результат будет примерно таким:
<template> <div class="panel"> <div class="header"> <p>Some title</p> </div> <div class="body"> <div class="body">Some content</div> </div> </div> </template>
Скажите «привет» в Твиттере 😃