努力学C的啦 2022-08-03 11:53 采纳率: 56.5%
浏览 86
已结题

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

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

学了几天vue2 ,今天做一个项目,需要导入Vant,之前学习过插槽,但是学习的时候基本上是A.vue中写发送的内容
然后在Left.vue 中插入slot,未取名的时候默认名为default,这样看我还可以理解

App.vue组件
<Left>
    <template v-slot:default>
        <p>
            这是在left内容区域
        </p>
    </template>
</Left>
Left.vue组件

left组件


<slot></slot>

但是!今天做一个案例遇到一个地方就理解不了了,请看

问题相关代码,请勿粘贴截图

为什么我把 #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

我想要达到的结果

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

  • 写回答

4条回答 默认 最新

  • qq_57168614 2022-08-04 19:15
    关注

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

    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论
查看更多回答(3条)

报告相同问题?

问题事件

  • 系统已结题 8月12日
  • 已采纳回答 8月4日
  • 创建了问题 8月3日

悬赏问题

  • ¥15 网络科学导论,网络控制
  • ¥15 metadata提取的PDF元数据,如何转换为一个Excel
  • ¥15 关于arduino编程toCharArray()函数的使用
  • ¥100 vc++混合CEF采用CLR方式编译报错
  • ¥15 coze 的插件输入飞书多维表格 app_token 后一直显示错误,如何解决?
  • ¥15 vite+vue3+plyr播放本地public文件夹下视频无法加载
  • ¥15 c#逐行读取txt文本,但是每一行里面数据之间空格数量不同
  • ¥50 如何openEuler 22.03上安装配置drbd
  • ¥20 ING91680C BLE5.3 芯片怎么实现串口收发数据
  • ¥15 无线连接树莓派,无法执行update,如何解决?(相关搜索:软件下载)