Vuetify.js自定义组件上的插槽
Vuetify.js自定义组件上的插槽
提问于 2021-10-14 11:05:36
我有一个呈现标准的组件。我想在我的组件中使用slots，我想写一些类似这样的东西：
<MyComponent>
<header>
Titolo
</header>
<body>
my component body
</body>
</MyComponent>那么最后一个组件应该是：
<v-dialog>
<h1>
// header slot content
</h1>
// body slot content
</v-dialog>我该怎么做呢？这只适用于<slot>，但不适用于命名槽。
回答 2
Stack Overflow用户
发布于 2021-10-14 11:29:57
要使用多个插槽，可以使用以下语法：
<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>Stack Overflow用户
发布于 2021-10-14 12:15:20
您可以使用可用于<slot>元素的name属性在自定义组件中定义插槽的名称，例如<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>页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/69569605
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号