努力学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 关于#服务器#的问题:在VMware虚拟机中有一个域控服务器,克隆这个服务器后,使用克隆在另外一台服务器VMware虚拟机上打开,修改IP地址, 原域控服务器关闭
  • ¥150 计算DC/DC变换器平均模型中的参数mu
  • ¥25 C语言代码,大家帮帮我
  • ¥15 请问以下文字内容及对应编码是用了什么加密算法或压缩算法呢?
  • ¥50 关于#html5#的问题:H5页面用户手机返回的时候跳转到指定页面例如(语言-javascript)
  • ¥15 无法使用此凭据登录,因为你的域不可用,如何解决?(标签-Windows)
  • ¥15 yolov9的训练时间
  • ¥15 二叉树遍历没有报错但无法正常运行
  • ¥15 在linux系统下vscode运行robocup3d上场球员报错
  • ¥15 Python语言实验