此vue2项目中插槽是怎么实现功能的

问题遇到的现象和发生背景

学了几天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>


运行结果及报错内容

正常情况

img


删除#title后

img


然后放一张界面图

img

我想要达到的结果

我想知道他是怎么做到的。

这是vant自带的插槽名,可以用来自定义内容。具体可以看vant组建库文档

你需要看下van-cell里面的插槽,看一下默认插槽跟具名插槽是否在显示上是互斥的。

看下van-cell里面的插槽,检查默认插槽跟具名插槽是否在显示上是互斥

检查 具名插槽 跟 默认插槽 在显示上是否有冲突