vue2插槽

news2025/2/24 20:04:41

本节目标

  • 默认插槽
  • 后备内容
  • 具名插槽
  • 作用域插槽
  • 案例-商品列表

默认插槽

让组件内部的一些结构 支持自定义

步骤

  1. 组件内需要定制的结构, 使用<slot></slot>占位

  1. 使用组件时, 传入结构替换slot的位置

后备内容

封装组件时, 可以为预留的<slot>插槽提供默认内容

步骤

  1. 在<slot>标签内, 放置内容, 作为默认显示内容

  1. 使用组件时, 如果不传东西, 显示slot后备内容

  1. 使用组件时, 传递内容, 则slot整体会被替换掉

具名插槽

一个组件内有多处结构, 需要外部传入标签, 进行定制, 需要使用具名插槽

步骤

  1. 组件内的slot标签, 使用 name属性 给插槽命名

  1. 使用组件时, 使用 template 配合 v-slot:插槽名 来分发标签

  1. v-slot:插槽名 可以简写成 #插槽名

作用域插槽

定义slot插槽的同时, 是可以传值的, 给插槽上绑定数据, 使用组件时可以接收数据

组件分类

  1. 默认插槽(组件内定义一处结构)
  2. 具名插槽(组件内定义多处结构)
  3. 作用域插槽不是一类组件, 是插槽的传参语法

封装表格组件

  1. 父传子, 动态渲染表格内容
  2. 利用默认插槽, 定制操作列
  3. 删除或查看操作, 都需要用到当前项的id, 属于组件内部的数据, 可以通过作用域插槽绑定数据, 供外部使用

步骤

  1. 给slot标签, 以添加属性的方式传值

  1. 所有添加的属性, 都会被收集到一个对象中

  1. 在template中, 通过 #插槽名="obj" 接收数据, 默认插槽, 通过 #default="obj" 接收数据

案例-商品列表

1>分析需求

my-ta组件

  1. 双击显示输入框, 输入框自动获取焦点
  2. 失去焦点, 隐藏输入框
  3. 回显标签信息
  4. 内容修改, 回车, 修改标签信息

my-table组件

  1. 动态传递表格数据渲染
  2. 表头支持自定义
  3. 主体支持自定义

2>创建tag组件

<template>
  <div class="my-tag">
  <!-- <input 
        class="input"
        type="text"
        placeholder="输入标签"
   /> -->
    <div class="text">茶具</div>
   </div>
</template>

<script>
export default {
};
</script>

<style lang="less" scoped>
.my-tag {
  cursor: pointer;
  .input {
    appearance: none;
    outline: none;
    border: 1px solid #ccc;
    width: 100px;
    height: 40px;
    box-sizing: border-box;
    padding: 10px;
    color: #666;
    &::placeholder {
      color: #666;
    }
  }
}
</style>

3>控制显示隐藏

<template>
  <div class="my-tag">
    <input
      v-if="isEdit"
      v-focus
      class="input"
      type="text"
      placeholder="输入标签"
      @blur="isEdit = false"
    />
    <div v-else class="text" @dblclick="handerEdit">茶具</div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isEdit: false,
    };
  },
  methods: {
    handerEdit() {
      this.isEdit = true;
    },
  },
};
</script>
... ...

// 全局注册自动获取焦点指令
Vue.directive('focus', {
  inserted: function (el) {
    el.focus()
  }
})
... ...

4>回显/修改数据

<template>
  <div class="my-tag">
    <input
      ... ...
      :value="value"
      @keyup.enter="inputEnter"
    />
    ... ...
  </div>
</template>

<script>
export default {
  // 通过v-model完成父子组件通信
  props: {
    value: String,
  },
  methods: {
    ... ...
    // 监听键盘回车事件
    inputEnter(e) {
      // 非空处理
      if (e.target.value.trim() === "") return alert("输入不能为空");
      // 触发自定义事件, 更新父组件数据
      // 通过事件对象拿到输入的新值
      this.$emit("input", e.target.value);
      // 编辑完成后, 隐藏输入框
      this.isEdit = false;
    },
  },
};
</script>
<template>
  <div class="table-case">
    <table class="my-table">
       ... ...
      <tbody>
        <tr>
          <td>1</td>
          <td>梨皮朱泥三绝清代小品壶经典款紫砂壶</td>
          <td>
            <img src="https://yanxuan-item.nosdn.127.net/f8c37ffa41ab1eb84bff499e1f6acfc7.jpg" />
          </td>
          <td>
            <my-tag v-model="text"></my-tag>
          </td>
        </tr>
      </tbody>
    </table>
  </div>
</template>

<script>
export default {
  name: 'TableCase',
  data() {
    return {
     // 临时绑定数据,检测v-model
     text: '默认数据';
    }
  },
}
</script>

5>创建my-table组件

<template>
  <table class="my-table">
    <thead>
      <tr>
        <th>编号</th>
        <th>名称</th>
        <th>图片</th>
        <th width="100px">标签</th>
      </tr>
    </thead>
    <tbody>
      <tr v-for="item in data" :key="item.id">
         <td>{{ item.id }}</td>
        <td>{{ item.name }}</td>
        <td>
          <img :src="item.picture" />
        </td>
        <td>
          MyTage组件
          <!-- <MyTage v-model="item.tag"></MyTage> -->
        </td>
      </tr>
    </tbody>
  </table>
</template>

<script>
export default {
  props: {
    data: {
      type: Array,
      require: true,
    },
  },
};
</script>

<style lang="less" scoped>
.my-table {
  width: 100%;
  border-spacing: 0;
  img {
    width: 100px;
    height: 100px;
    object-fit: contain;
    vertical-align: middle;
  }
  th {
    background: #f5f5f5;
    border-bottom: 2px solid #069;
  }
  td {
    border-bottom: 1px dashed #ccc;
  }
  td,
  th {
    text-align: center;
    padding: 10px;
    transition: all 0.5s;
    &.red {
      color: red;
    }
  }
  .none {
    height: 100px;
    line-height: 100px;
    color: #999;
  }
}
</style>
<template>
  <div class="table-case">
    <MyTable :data="goods"></MyTable>
  </div>
</template>

<script>
export default {
  name: "TableCase",
  data() {
    return {
      goods: [
        {
          id: 101,
          picture:
            "https://yanxuan-item.nosdn.127.net/f8c37ffa41ab1eb84bff499e1f6acfc7.jpg",
          name: "梨皮朱泥三绝清代小品壶经典款紫砂壶",
          tag: "茶具",
        },
        {
          id: 102,
          picture:
            "https://yanxuan-item.nosdn.127.net/221317c85274a188174352474b859d7b.jpg",
          name: "全防水HABU旋钮牛皮户外徒步鞋山宁泰抗菌",
          tag: "男鞋",
        },
        {
          id: 103,
          picture:
            "https://yanxuan-item.nosdn.127.net/cd4b840751ef4f7505c85004f0bebcb5.png",
          name: "毛茸茸小熊出没，儿童羊羔绒背心73-90cm",
          tag: "儿童服饰",
        },
        {
          id: 104,
          picture:
            "https://yanxuan-item.nosdn.127.net/56eb25a38d7a630e76a608a9360eec6b.jpg",
          name: "基础百搭，儿童套头针织毛衣1-9岁",
          tag: "儿童服饰",
        },
      ],
    };
  },
};
</script>

<style lang="less" scoped>
.table-case {
  width: 1000px;
  margin: 50px auto;
  img {
    width: 100px;
    height: 100px;
    object-fit: contain;
    vertical-align: middle;
  }
}
</style>

6>结构自定义

<template>
  <table class="my-table">
    <thead>
      <tr>
        <slot name="header"></slot>
      </tr>
    </thead>
    <tbody>
      <tr v-for="item in data" :key="item.id">
        <slot name="body" :item="item"></slot>
      </tr>
    </tbody>
  </table>
</template>

<script>
export default {
  props: {
    data: {
      type: Array,
      require: true,
    },
  },
};
</script>
<template>
  <div class="table-case">
    <MyTable :data="goods">
      <template #header>
        <th>编号</th>
        <th>名称</th>
        <th>图片</th>
        <th width="100px">标签</th>
      </template>
      <template #body="{ item }">
        <td>{{ item.id }}</td>
        <td>{{ item.name }}</td>
        <td>
          <img :src="item.picture" />
        </td>
        <td>
          <!-- MyTage组件 -->
          <MyTage v-model="item.tag"></MyTage>
        </td>
      </template>
    </MyTable>
  </div>
</template>

<script>
export default {
  name: "TableCase",
  data() {
    return {
      goods: [
        {
          id: 101,
          picture:
            "https://yanxuan-item.nosdn.127.net/f8c37ffa41ab1eb84bff499e1f6acfc7.jpg",
          name: "梨皮朱泥三绝清代小品壶经典款紫砂壶",
          tag: "茶具",
        },
        {
          id: 102,
          picture:
            "https://yanxuan-item.nosdn.127.net/221317c85274a188174352474b859d7b.jpg",
          name: "全防水HABU旋钮牛皮户外徒步鞋山宁泰抗菌",
          tag: "男鞋",
        },
        {
          id: 103,
          picture:
            "https://yanxuan-item.nosdn.127.net/cd4b840751ef4f7505c85004f0bebcb5.png",
          name: "毛茸茸小熊出没，儿童羊羔绒背心73-90cm",
          tag: "儿童服饰",
        },
        {
          id: 104,
          picture:
            "https://yanxuan-item.nosdn.127.net/56eb25a38d7a630e76a608a9360eec6b.jpg",
          name: "基础百搭，儿童套头针织毛衣1-9岁",
          tag: "儿童服饰",
        },
      ],
    };
  },
};
</script>

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/1810719.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

Nacos长轮询底层是怎么实现的？

Nacos长轮询底层是怎么实现的？

点击下方“JavaEdge”&#xff0c;选择“设为星标” 第一时间关注技术干货&#xff01; 免责声明~ 任何文章不要过度深思&#xff01; 万事万物都经不起审视&#xff0c;因为世上没有同样的成长环境&#xff0c;也没有同样的认知水平&#xff0c;更「没有适用于所有人的解决方案…
阅读更多...
【perl】环境搭建

【perl】环境搭建

1、Vscode Strawberry Perl 此过程与tcl环境搭建很类似&#xff0c;请参考我的这篇文章&#xff1a; 【vscode】 与 【tclsh】 联合搭建tcl开发环境_tclsh软件-CSDN博客 perl语言的解释器可以选择&#xff0c;strawberry perl。Strawberry Perl for Windows - Releases。 …
阅读更多...
一次性全部给你，这4款名不见经传的精品软件，用了就放不下

一次性全部给你，这4款名不见经传的精品软件，用了就放不下

Geek Geek是个电脑卸载软件神器。 Geek 电脑空间不够了&#xff0c;想卸点应用来腾地方&#xff0c;但总是遇到各种问题&#xff0c;要么卸不干净&#xff0c;留下一些乱七八糟的文件&#xff0c;要么就是那些流氓软件&#xff0c;怎么卸都卸不掉&#xff0c;简直让人崩溃&am…
阅读更多...
如何格式化U盘？4个正确方法，记得收藏好！

如何格式化U盘？4个正确方法，记得收藏好！

“我的u盘不知道是中病毒还是什么原因&#xff0c;现在没法使用了&#xff0c;我想将它进行格式化操作&#xff0c;想问问大家应该如何格式化u盘呢&#xff1f;请帮帮我&#xff01;” U盘作为我们日常生活中不可或缺的存储设备&#xff0c;常常用于传输和保存各种重要数据。然…
阅读更多...
ES8.13 _bulk报错Malformed content, found extra data after parsing: START_OBJECT解决

ES8.13 _bulk报错Malformed content, found extra data after parsing: START_OBJECT解决

在使用elaticsearch8.13.0使用批量创建索引时&#xff0c;根据谷粒中说的es7.9方法去批量操作请求&#xff1a; http://127.0.0.1:9200/shop/_doc/_bulk 注意1&#xff1a;设置header为Content-Type:application/x-ndjson,否则请求报错&#xff1a; {"error": &qu…
阅读更多...
WWDC24 快速回顾

WWDC24 快速回顾

今天凌晨&#xff0c;苹果公司在2024年全球开发者大会&#xff08;WWDC24&#xff09;上&#xff0c;发布了一系列的系统更新。然而&#xff0c;对于期待苹果带来突破性创新的消费者来说&#xff0c;今年的大会似乎并没有达到预期的震撼效果。 下面让我看看&#xff0c;苹果都带…
阅读更多...
html--万年历

html--万年历

<!DOCTYPE html> <html lang"zh_CN"><head><meta http-equiv"Content-Type" content"text/html; charsetUTF-8" /><meta charset"utf-8" /><title>万年历</title><link rel"styles…
阅读更多...
第十篇——等价性：信息是如何压缩的？

第十篇——等价性：信息是如何压缩的？

目录 一、背景介绍二、思路&方案三、过程1.思维导图2.文章中经典的句子理解3.学习之后对于投资市场的理解4.通过这篇文章结合我知道的东西我能想到什么&#xff1f; 四、总结五、升华 一、背景介绍 基于信息是如何进行压缩的&#xff0c;引出来等价信息的概念&#xff1b;…
阅读更多...
英特尔MRT技术是什么？

英特尔MRT技术是什么？

在多个内存故障预测中&#xff0c;都有提到英特尔MRT技术&#xff0c;那么这个到底是什么&#xff0c;有什么作用。我们结合英特尔官网信息了解下&#xff1a; 英特尔MRT&#xff0c;全称Memory Resilience Technology&#xff0c;官网介绍它是一种内存 RAS 技术&#xff0c;用…
阅读更多...
查找最佳分数Π

查找最佳分数Π

查找分子或分母不大于一亿的分数Π private static final int MAX_N 100000000;private static void findPIByDivider() {Log.d("findPI", "findPIByDivider start MAX_N" MAX_N);long curtime System.currentTimeMillis();double lastRet 1;int selec…
阅读更多...
计算机网络9——无线网络和移动网络3 蜂窝移动通信网

计算机网络9——无线网络和移动网络3 蜂窝移动通信网

文章目录 一、蜂窝无线通信技术的发展简介1、蜂窝移动通信系统问世2、2G 蜂窝移动通信系统3、数据通信被引入移动通信系统4、3G 蜂窝移动通信系统4、4G 蜂窝移动通信系统 一、蜂窝无线通信技术的发展简介 1、蜂窝移动通信系统问世 移动通信的种类很多&#xff0c;如蜂窝移动通…
阅读更多...
MySQL密码自动过期配置

MySQL密码自动过期配置

目录 一、密码自动过期 1、临时 2、永久 3、查看 4、账号设置 一、密码自动过期 登录数据库查看是否生效 mysql -u root -p #查看数据库账号状态 select user,host,password_expired,password_lifetime,password_last_changed,account_locked from mysql.user; 1、passwo…
阅读更多...
2024检索增强生成RAG最新综述

2024检索增强生成RAG最新综述

论文地址&#xff1a;https://arxiv.org/abs/2402.19473 项目存储库&#xff1a;https://github.com/hymie122/RAG-Survey 摘要—人工智能生成内容&#xff08;AIGC&#xff09;的发展得益于模型算法的进步、基础模型规模的增加以及大量高质量数据集的可用性。虽然AIGC取得了…
阅读更多...
亚马逊、Lazada、shopee等跨境电商平台测评自养号怎么做？

亚马逊、Lazada、shopee等跨境电商平台测评自养号怎么做？

近年来越来越多的国内卖家进入跨境电商市场&#xff0c;竞争日益激烈&#xff0c;测评的需求越来越大&#xff0c;那么什么是测评&#xff1f; 测评就是买家号通过平台进入自己的店铺购买产品增加销量&#xff0c;买家号收到产品后也可以进行评价&#xff0c;其中包括&#xf…
阅读更多...
跨国大文件传输需要哪些方面？怎么实现数据快速传输？

跨国大文件传输需要哪些方面？怎么实现数据快速传输？

跨国大文件传输涉及到许多方面&#xff0c;包括网络速度、安全性、可靠性和法律合规性等。 以下是跨国大文件传输时需要考虑的一些重要方面&#xff1a; 高速稳定的网络连接&#xff1a;确保有足够的带宽和稳定的网络连接以支持大文件的快速传输。这可能需要考虑到跨国网络的延…
阅读更多...
【C++题解】1457 - 子数整除

【C++题解】1457 - 子数整除

问题&#xff1a;1457 - 子数整除 类型&#xff1a;循环应用 题目描述&#xff1a; 于一个五位数 abcde &#xff0c;可将其拆分为三个子数&#xff1a; sub1abc sub2bcd sub3cde 例如&#xff0c;五位数20207 可以拆分成sub1202 sub2020 (也就是 20) sub3207 现在给定一个正…
阅读更多...
xLua(一) 环境安装笔记

xLua(一) 环境安装笔记

为了方便查阅记录一下xLua的安装地址及方法 1.登录地址下载: https://github.com/Tencent/xLua 2.解压文件 将文件中的这些内容拷贝到项目中的Asset文件夹中 注意 : 工程项目路径不得含有中文 3.将Tools复制到Asset同级目录下 4.导入后会发现有Bug,需要导入工程 5.还有另…
阅读更多...
我在得物的这两年

我在得物的这两年

写在前面 这篇文章非常简单&#xff0c;和大家简单聊聊我在得物的这两年&#xff0c;也是从学生到社会人的这两年。 我是2022年的6月加入得物实习&#xff0c;负责某个业务中台的后端研发&#xff0c;那一年我21岁&#xff0c;还在读大三&#xff0c;还在迷茫未来是读研还是工…
阅读更多...
爱奇艺视频怎么转换成mp4格式，爱奇艺qsv转换mp4最简单方法

爱奇艺视频怎么转换成mp4格式，爱奇艺qsv转换mp4最简单方法

在数字化时代&#xff0c;视频格式的转换成为了我们日常生活中常见的需求。特别是对于那些经常从各大视频平台下载视频的朋友来说&#xff0c;将特定格式的视频转换为更通用的格式&#xff0c;如MP4&#xff0c;变得尤为重要。其中&#xff0c;qsv格式的视频转换就是一项常见的…
阅读更多...
大模型+RAG，全面介绍！

大模型+RAG，全面介绍！

1 、介绍 大型语言模型&#xff08;LLMs&#xff09;在处理特定领域或高度专业化的查询时存在局限性&#xff0c;如生成不正确信息或“幻觉”。缓解这些限制的一种有前途的方法是检索增强生成&#xff08;RAG&#xff09;&#xff0c;RAG就像是一个外挂&#xff0c;将外部数据…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023