#vue.js #vuetify.js
Вопрос:
У меня есть компонент, который отображает стандарт . Я хотел бы использовать slots из своего компонента, я хотел бы написать что-то вроде:
<MyComponent>
<header>
Titolo
</header>
<body>
my component body
</body>
</MyComponent>
тогда конечный компонент должен быть:
<v-dialog>
<h1>
// header slot content
</h1>
// body slot content
</v-dialog>
как я могу это сделать? Это работает только с <slot> именованным слотом, но не с ним.
Ответ №1:
Чтобы использовать несколько слотов, вы можете использовать следующий синтаксис:
<MyComponent>
<template v-slot:header>
Titolo
</template>
<template v-slot:body>
<p>my component body</p>
</template>
</MyComponent>
Таким образом, вы можете передать некоторый HTML-код в блоки шаблона, и он будет отображаться в компоненте.
У MyComponent.vue есть следующий контент:
<template>
<v-dialog>
<h1>
<slot name="header"></slot>
</h1>
<slot name="body"></slot>
</v-dialog>
</template>
Ответ №2:
Вы можете определить имена слотов в пользовательском компоненте, используя name атрибут, доступный для <slot> элемента, например <slot name="header"> . Если вы не определите имя для слота, его имя будет просто default . См. Vue.js документация по слотам здесь: https://vuejs.org/v2/guide/components-slots.html
Кроме того, я привел простой пример использования, который вы можете посмотреть здесь: https://codesandbox.io/s/unruffled-mopsa-f47hm?file=/src/App.vue
Таким образом, в вашем случае ваш пользовательский компонент может выглядеть примерно так:
<v-dialog>
<slot name="header" />
<slot name="body" />
</v-dialog>
И чтобы использовать его в родительском компоненте, вы могли бы:
<MyComponent>
<template v-slot:header>
Titolo
</template>
<template v-slot:body>
<p>my component body</p>
</template>
</MyComponent>