努力学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日

悬赏问题

  • ¥65 LineageOs-21.0系统编译问题
  • ¥30 关于#c++#的问题,请各位专家解答!
  • ¥15 App的会员连续扣费
  • ¥15 不同数据类型的特征融合应该怎么做
  • ¥15 用proteus软件设计一个基于8086微处理器的简易温度计
  • ¥15 用联想小新14Pro
  • ¥15 multisim中关于74ls192n和DSWPK开关仿真图分析(减法计数器)
  • ¥15 w3wp,exe 中发生未处理的 Microsoft ,NETFramework 异常。
  • ¥20 C51单片机程序及仿真(加减器)
  • ¥15 AQWA | 水动力分析 二阶波浪力