vue.js - Vue 将子组件包含到父插槽中
问题描述
我正在处理 vue 中的选项卡组件,类似于左侧的垂直导航栏和右侧的选项卡内容。我的标签标题有图标,我试图<slot>
在每个标签标题中放置不同的图标。
刀片模板:
<tabs>
<tab name="one" :selected="true">
<svg>icon 1</svg>
</tab>
<tab name="two">
<svg>icon 2</svg>
</tab>
<tab name="three">
<svg>icon 3</svg>
</tab>
<tabs>
选项卡.vue
<template>
<ul class="my-class" role="tablist">
<li v-for="(tab, index) in tabs" :key="index">
<a>
// here I want to place my icon defined in my blade view
<slot></slot> // this doesn't work and it is showing 0 items in tab array
<span>{{ tab.name }}</span>
</a>
</li>
<slot></slot>
// if placed here it works and it is showing 3 items in tab array
// but icon's are placed under all 3 li elemets
</ul>
</template>
选项卡.vue
<template>
<div>
<slot></slot>
</div>
</template>
我已经尝试了很多不同的组合,但没有一个有效,而且很难知道发生了什么,因为没有错误消息。我在 vue 方面没有经验,我正在尝试检查 vue 文档,但一定有一些东西让我无法理解或者我没有得到一些东西。
有人可以告诉我错误在哪里或者我应该如何重写我的代码?
解决方案
推荐阅读
- python - 内核随着 Python 中库的导入而冻结
- angular - 如何在 Angular Material 对话框中重用实例化组件?
- windows - 仅列出过期用户帐户的 Windows 命令
- css - 用于电子邮件文本的 AMP 未出现(电子邮件开发)
- tensorflow - 在 Tensorflow 中为文本分类拟合 BERT 模型时出现类型错误
- google-sheets - 试图从网络获取数据到谷歌表
- javascript - 如何在 react-native 中检索 firebase 数据
- amazon-elastic-beanstalk - 在 AWS Elastic Beanstalk(Docker Amazon Linux 2 平台)中为 docker-compose.yml 使用不同的名称
- java - 如何使用 jacoco 插件将 xml 的代码覆盖率与 gradle 中的 html 进行比较
- reactjs - react DataGrid:附加自定义过滤器运算符而不删除其他运算符