vue.js - 根据条件将 v-slot 元素包装在不同的父级中
问题描述
我有一个模板:
<template v-slot:title>
{{ $t('title') }}
</template>
和一个组件:
<v-col cols="12">
<h5 class="text-h5">
<slot name="title" />
</h5>
</v-col>
<h4>
我只想为一个特定实例用标签包装插槽。我尝试将其包装在模板中,但没有效果。如何交换包裹插槽的元素?
解决方案
您可以使用非强制性道具将您想要的标签类型传递给组件,并根据传递的值将内容包装到动态组件中(在示例中,h2、h3 和 h4 是正确的值)
在组件模板中:
<v-col cols="12">
<component :is="wrapper" :class="`text-${wrapper}`">
<slot name="title" />
</component>
</v-col>
在组件脚本中:
props: {
wrapper: {
type : String,
required : false,
default : 'h5',
validator: value => [ 'h2', 'h3', 'h4' ].includes(value)
}
}
推荐阅读
- bootstrap-modal - React-Bootstrap Modal 移动尺寸有额外的空白
- docker - 从 Docker 容器运行 docker-compose
- javascript - AngularJS 指令在使用 $.get 加载动态内容后编译
- laravel - SQLSTATE[08006] 超时过期
- c# - 使用 netcore 2.2 运行“dotnet Myapp.dll”时覆盖 applicationUrl
- nginx - Nginx 入口 OAuth 注销(Kubernetes)?
- terminology - 解释回归输出:股票指数百分比与基点变化
- java - 如何在放心的测试用例中重用 oauth2 令牌
- list - Azure Cosmos 查询转换为列表
- html - Bootstrap 4 导航栏在编码过程中丢失了背景