努力学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 华为ensp模拟器中S5700交换机在配置过程中老是反复重启
  • ¥15 java写代码遇到问题,求帮助
  • ¥15 uniapp uview http 如何实现统一的请求异常信息提示?
  • ¥15 有了解d3和topogram.js库的吗?有偿请教
  • ¥100 任意维数的K均值聚类
  • ¥15 stamps做sbas-insar,时序沉降图怎么画
  • ¥15 买了个传感器,根据商家发的代码和步骤使用但是代码报错了不会改,有没有人可以看看
  • ¥15 关于#Java#的问题,如何解决?
  • ¥15 加热介质是液体,换热器壳侧导热系数和总的导热系数怎么算
  • ¥100 嵌入式系统基于PIC16F882和热敏电阻的数字温度计