学了几天vue2 ,今天做一个项目,需要导入Vant,之前学习过插槽,但是学习的时候基本上是A.vue中写发送的内容
然后在Left.vue 中插入slot,未取名的时候默认名为default,这样看我还可以理解
App.vue组件
<Left>
<template v-slot:default>
<p>
这是在left内容区域
p>
template>
Left>
Left.vue组件
left组件
但是!今天做一个案例遇到一个地方就理解不了了,请看
为什么我把 #title 这样的插槽名删除后,页面上最下方的标签就消失了,他在哪写了 slot 吗,
是因为 vant 吗,很不理解,求指点
<template>
<div>
<van-cell>
<template #title>
<div class="title-box">
<span>文章的标题噢span>
<img src="https://www.escook.cn/vuebase/pics/1.png" alt="" class="thumb">
div>
<div class="thumb-box">
<img src="https://www.escook.cn/vuebase/pics/2.png" alt="" class="thumb">
<img src="https://www.escook.cn/vuebase/pics/2.png" alt="" class="thumb">
<img src="https://www.escook.cn/vuebase/pics/2.png" alt="" class="thumb">
div>
template>
<template #label>
<div class="label-box">
<span>作者 0评论 发布日期span>
<van-icon name="cross" />
div>
template>
van-cell>
div>
template>
<script>
export default {
}
script>
<style lang='less' scoped>
.label-box {
display: flex;
justify-content: space-between;
align-items: center;
}
.thumb {
// 矩形黄金比例:0.618
width: 113px;
height: 70px;
background-color: #f8f8f8;
object-fit: cover;
}
.title-box {
display: flex;
justify-content: space-between;
align-items: flex-start;
}
.thumb-box {
display: flex;
justify-content: space-between;
}
style>
正常情况
我想知道他是怎么做到的。
这是vant自带的插槽名,可以用来自定义内容。具体可以看vant组建库文档
你需要看下van-cell里面的插槽,看一下默认插槽跟具名插槽是否在显示上是互斥的。
看下van-cell里面的插槽,检查默认插槽跟具名插槽是否在显示上是互斥
检查 具名插槽 跟 默认插槽 在显示上是否有冲突