【Vue 快速入门系列】3分钟掌握Vue中插槽的使用与理解

news2025/1/21 10:21:44

文章目录

  • 前言
  • 一、常规实现方式
  • 二、匿名插槽
  • 三、具名插槽
  • 四、作用域插槽

前言

  1. 插槽作用：让父组件可以向子组件指定位置插入html结构，也是一种组件间通信的方式，适用于 父组件 ===> 子组件 。

  2. 插槽分类：默认插槽、具名插槽、作用域插槽

  3. 理解插槽：数据在组件的自身或者是父组件在槽位传入，但根据数据生成的结构需要组件的使用者来决定（父级组件传入）。

通俗点来说：插槽就是子组件中的提供给父组件使用的一个占位符，用<slot></slot> 表示，父组件可以在这个占位符中填充任何模板代码，如 HTML、组件等，填充的内容会替换子组件中的<slot></slot>标签。如果不使用插槽，父组件标签中的代码将会被忽略，合理的使用插槽功能会使我们写代码更加方便。今天就会结合下面一个小案例让大家融会贯通Vue中的插槽。

如图，展示出了三个列表，其中列表中的数据与定义都在父组件，子组件只进行了渲染工作。可以先看下面三幅图。
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
看完上面三幅图相信大家对这个小案例有了一定的了解，接下来要做的就是使用插槽，对列表内的内容进行定制，实现在父组件内定义子组件时将样式传进去，从而实现相同的列表模板渲染出不同的效果，这得益于插槽可以将父组件中包含的html样式传送给子组件固定的槽位。
在这里插入图片描述

接下来咱们一起看看插槽如何使用吧。

一、常规实现方式

这种实现方式会将html样式写在子组件内，实现之后可以发现子组件的内容已经写死，并没有办法在父组件实现更新与扩展。
核心代码（Lists组件）：

<template>
  <div class="someOne">
    <h2>{{title}}名单</h2>
    <ul  v-show="title==='游戏'">
      <li v-for="(i, index) in mylis" :key="index">
        {{ i }}
      </li>
    </ul>
    <img v-show="title==='美食'" src="https://s3.ax1x.com/2021/01/16/srJlq0.jpg" alt="">
    <video v-show="title==='电影'" controls src="http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4"></video>
  </div>
</template>

二、匿名插槽

匿名插槽就是没有名字的插槽，如何使用完全按照Vue的规则进行分配，如下图每一个匿名插槽均会将该组件标签包含的模板渲染一遍。
vue渲染匿名插槽的规则是：将组件标签中包含的html完整的替换子组件内的插槽（子组件有多少个替换多少个）。
在这里插入图片描述
父组件的代码如下(App.vue)：

<template>
  <div class="container">
  //Lists标签包含的所有内容均会挂载到Lists组件内的solt标签上
    <Lists title="游戏">
    /*
    	<Lists></Lists>之间的内容可以认为是父组件的一个槽位，页面渲染时会将槽位的内容放入子组件的插槽中
    */
      <ul>
        <li v-for="(i, index) in games" :key="index">
          {{ i }}
        </li>
      </ul>
      <div>Hello</div>
    </Lists>
    <Lists title="美食">
      <img src="https://s3.ax1x.com/2021/01/16/srJlq0.jpg" alt="" />
      <video
        controls
        src="http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4"
      ></video>
    </Lists>
    <Lists title="电影">
      <video
        controls
        src="http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4"
      ></video>
    </Lists>
  </div>
</template>

<script>
import Lists from "./components/Lists.vue";
export default {
  name: "App",
  components: {
    Lists,
  },
  data() {
    return {
      foods: ["火锅", "烧烤", "小龙虾", "牛排"],
      games: ["红色警戒", "穿越火线", "劲舞团", "超级玛丽"],
      films: ["《教父》", "《拆弹专家》", "《你好，李焕英》", "《尚硅谷》"],
    };
  },
};
</script>

<style scoped>
.container {
  display: flex;
  justify-content: space-around;
}
</style>

子组件代码如下（Lists.vue）：

<template>
  <div class="someOne">
    <h2>{{title}}名单</h2>
    <!-- 以下操作是匿名插槽，使用者需要自定义内容,最后内容会插在这个插槽内 -->
    <!-- 如果是两个插槽的话，会将传进来的东西放两遍，多个放多遍 -->
    <slot></slot>
    <slot></slot>
  </div>
</template>

<script>
export default {
  // eslint-disable-next-line vue/multi-word-component-names
  name: "Lists",
  props: ["title"],
};
</script>

<style>
.someOne{
    width: 200px;
    height: 300px;
    background-color: rgb(0, 184, 144);
    margin-top: 100px;
}
h2{
    text-align: center;
    background-color: #F96B36;
}
img{
    width: 100%;
}
video{
    width: 100%;
}
</style>

三、具名插槽

具名插槽就是有名字的插槽，如何使用完全按照Vue的规则进行分配，渲染时根据名字进行精准渲染，没有内容传进来就使用默认内容。
vue渲染具名插槽的规则是：将组件中包含的html有规则的替换子组件内相应的具名插槽（精准的替换）。
第一步就是在使用组件时定义模板要挂载到哪个插槽上
例：将图片挂载到插槽名为center的槽位

<img slot="center"
  src="https://s3.ax1x.com/2021/01/16/srJlq0.jpg"
  alt=""
/>

第二步就是在组件内定义插槽的位置。
例：这个槽位等待等待slot="center"的标签挂载。

<slot name="center">我是一个插槽，我位于中间，当没有数据传过来的时候我会显示</slot>

在这里插入图片描述

在这里插入图片描述

父组件（App.vue）

<template>
  <div class="container">
    <Lists title="游戏">
    //第一种传入方式
      <ul slot="center">
        <li v-for="(i, index) in games" :key="index">
          {{ i }}
        </li>
      </ul>
      <div class="centerdiv" slot="footer">
        <a href="#">单击游戏</a>
        <a href="#">网络游戏</a>
      </div>
    </Lists>
    <Lists title="美食">
      <img slot="center"
        src="https://s3.ax1x.com/2021/01/16/srJlq0.jpg"
        alt=""
      />
      <a href="#" slot="footer">更多美食</a>
    </Lists>
    <Lists title="电影">
      <video slot="center"
        controls
        src="http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4"
      ></video>
      //第二种传入方式
      <template v-slot:footer>
        <ul>
          <li>热门电影</li>
          <li>经典电影</li>
          <li>豪华电影</li>
        </ul>

      </template>
    </Lists>
  </div>
</template>

<script>
import Lists from "./components/Lists.vue";
export default {
  name: "App",
  components: {
    Lists,
  },
  data() {
    return {
      foods: ["火锅", "烧烤", "小龙虾", "牛排"],
      games: ["红色警戒", "穿越火线", "劲舞团", "超级玛丽"],
      films: ["《教父》", "《拆弹专家》", "《你好，李焕英》", "《尚硅谷》"],
    };
  },
};
</script>

<style scoped>
.container,.centerdiv{
  display: flex;
  justify-content: space-around;
}
</style>

子组件（Lists.vue）

<template>
  <div class="someOne">
    <h2>{{title}}名单</h2>
    <!-- 以下操作是匿名插槽，使用者需要自定义内容,最后内容会插在这个插槽内 -->
    <!-- 如果是两个插槽的话，会将传进来的东西放两遍，多个放多遍 -->
    <slot name="center">我是一个插槽，我位于中间，当没有数据传过来的时候我会显示</slot>
    <slot name="footer">我是一个插槽，我位于下面，当没有数据传过来的时候我会显示</slot>
  </div>
</template>

<script>
export default {
  // eslint-disable-next-line vue/multi-word-component-names
  name: "Lists",
  props: ["title"],
};
</script>

<style>
.someOne{
    width: 200px;
    height: 300px;
    background-color: rgb(0, 184, 144);
    margin-top: 100px;
}
h2{
    text-align: center;
    background-color: #F96B36;
}
img{
    width: 100%;
}
video{
    width: 100%;
}
</style>

四、作用域插槽

作用域插槽，可以认为是子组件向父组件传送数据的第三种方式，可以将子组件的数据带到父组件内。
如图：目前页面上的数据定义均在子组件内，但是数据的使用却在父组件内。
作用域插槽：插槽内的数据只在本插槽范围内起作用。
在这里插入图片描述
App.vue

<template>
  <div class="container">
    <Category title="游戏">
      <template scope="atguigu">
        <ul>
          <li v-for="(g, index) in atguigu.games" :key="index">{{ g }}</li>
        </ul>
      </template>
    </Category>

    <Category title="游戏">
      <template scope="{games}">
        <ol>
          <li style="color: red" v-for="(g, index) in games" :key="index">
            {{ g }}
          </li>
        </ol>
      </template>
    </Category>

    <Category title="游戏">
      <!-- 使用的是解构语法，将对象拆开来使用 -->
      <template slot-scope="{ games, msg }">
        <h4 v-for="(g, index) in games" :key="index">{{ g }}</h4>
        <h3>{{ msg }}</h3>
      </template>
    </Category>
  </div>
</template>

<script>
import Category from "./components/Category";
export default {
  name: "App",
  components: { Category },
};
</script>

<style scoped>
.container,
.foot {
  display: flex;
  justify-content: space-around;
}
h4 {
  text-align: center;
}
</style>

Lists.vue

<template>
	<div class="category">
		<h3>{{title}}分类</h3>
		<slot :games="games" msg="hello">我是默认的一些内容</slot>
	</div>
</template>

<script>
	export default {
		// eslint-disable-next-line vue/multi-word-component-names
		name:'Category',
		props:['title'],
		data() {
			return {
				games:['红色警戒','穿越火线','劲舞团','超级玛丽'],
			}
		},
	}
</script>

<style scoped>
	.category{
		background-color: skyblue;
		width: 200px;
		height: 300px;
	}
	h3{
		text-align: center;
		background-color: orange;
	}
	video{
		width: 100%;
	}
	img{
		width: 100%;
	}
</style>

到这里插槽的几种使用方式也就结束了，如果有更好的用法欢迎评论区留言！
在这里插入图片描述

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

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

相关文章

docker部署solr+zk集群

docker部署solr+zk集群

在三台服务器上搭建solr集群&#xff0c;具体架构如下所示&#xff1a; 192.168.184.127 solr1/zk1 192.168.184.128 solr2/zk2 192.168.184.129 solr3/zk3 1.安装docker 三台服务器上都执行以下命令 # setenforce 0 # systemctl stop firewall…
阅读更多...
代码随想录Day56|583.两个字符串的删除操作 、72.编辑距离、编辑距离总结篇

代码随想录Day56|583.两个字符串的删除操作 、72.编辑距离、编辑距离总结篇

文章目录583.两个字符串的删除操作72.编辑距离编辑距离总结篇583.两个字符串的删除操作 文章讲解&#xff1a;代码随想录 (programmercarl.com) 题目链接&#xff1a;583. 两个字符串的删除操作 - 力扣&#xff08;LeetCode&#xff09; 题目&#xff1a; 给定两个单词 wor…
阅读更多...
Flume EmbeddedAgent

Flume EmbeddedAgent

flume flume 二次开发&#xff0c;对EmbeddedAgent的简易改造&#xff0c;动态控制agent&#xff0c;实现启动、关闭等功能。 模块结构如下所示&#xff1a; flume-parent github地址 1、用途 1.1、本地调试 对flume不是特别熟悉的开发者&#xff0c;都没有办法一次开发完…
阅读更多...
消息队列mq

消息队列mq

1. 为什么使用消息队列&#xff1f; 其实就是问问你消息队列都有哪些使用场景&#xff0c;然后你项目里具体是什么场景&#xff0c;说说你在这个场景里用消息队列是什么&#xff1f; 解耦、异步、削峰 2. 消息队列优缺点 2.1.优点 优点上面已经说了&#xff0c;就是在特殊…
阅读更多...
并查集的原理及实现

并查集的原理及实现

Ⅰ. 并查集原理 在一些应用问题中&#xff0c;需要将 n 个不同的元素划分成一些不相交的集合。开始时&#xff0c;每个元素自成一个单元素集合&#xff0c;然后按一定的规律将归于同一组元素的集合合并。在此过程中要反复用到查询某一个元素归属于那个集合的运算。适合于描述这…
阅读更多...
前端基础_线型Line styles

前端基础_线型Line styles

线型Line styles 线型包括如下属性。 lineWidth value lineCap type lineJoin type miterLimit value 通过这些属性来设置线的样式。下面将结合实例来讲解一下各属性的应用及应用后的效果。 lineWidth属性 该属性设置当前绘线的粗细&#xff0c;属性值必须…
阅读更多...
ArcGIS编辑绘制图斑又慢又难？这些高效的处理技巧你值得拥有！

ArcGIS编辑绘制图斑又慢又难？这些高效的处理技巧你值得拥有！

GIS画图是不是画得很慢！ 图斑修改是不是无从下手！ 图纸矢量化是不是琐碎繁杂、工作量大！ 其实，强大的ArcGIS有很多高效的图斑编辑技巧，掌握这些技巧，无论是绘制图斑、还是修改图斑，还是图纸矢量化，绝对让你事半功倍！ NO.1—自动完成面 当你要绘制一个图斑的相邻图…
阅读更多...
华为云桌面，企业云上办公为何都偏好它？

华为云桌面，企业云上办公为何都偏好它？

在众多云上办公产品中&#xff0c;华为云桌面基于华为云的三十年投入的技术强、资源多、创新快和更可靠的优势&#xff0c;在众多云上办公产品中脱颖而出&#xff0c;成为众多企业数字化转型道路上不二选择&#xff0c;类似于三一重工、中泰模具、小飞侠等企业都选择了华为云桌…
阅读更多...
非递归前序、中序遍历代码推演出后序遍历代码（极其透彻）

非递归前序、中序遍历代码推演出后序遍历代码（极其透彻）

一、前言 众所周知&#xff0c;二叉树的遍历方式有三种&#xff1a;前序遍历、中序遍历和后序遍历。 &#x1f34c; 前序遍历&#xff1a;首先访问根节点&#xff0c;然后递归遍历左子树&#xff0c;最后递归遍历右子树。 &#x1f34c; 中序遍历&#xff1a;首先递归遍历左…
阅读更多...
pypower的简单应用1

pypower的简单应用1

目录 一、背景描述 二、如何打开IEEE30节点并进行潮流计算 三、如何修改已有模型参数 四、完整代码 五、注意事项 pypower与matpower非常类似&#xff0c;可以利用matpower学习pypower&#xff0c;当然也有一些不同之处。下面记录一下应用pypower解决的问题。 一、背景描述…
阅读更多...
Java优先队列的代码实现过程详解

Java优先队列的代码实现过程详解

1.优先队列定义 普通的队列是一种先进先出的数据结构&#xff0c;元素在队列尾追加&#xff0c;而从队列头删除。在某些情况下&#xff0c;我们可能需要找出队列中的最大值或者最小值&#xff0c;例如使用一个队列保存计算机的任务&#xff0c;一般情况下计算机的任务都是有优先…
阅读更多...
《Python程序开发》期末作业

《Python程序开发》期末作业

提示&#xff1a;文章写完后&#xff0c;目录可以自动生成&#xff0c;如何生成可参考右边的帮助文档 目录 一、题目&#xff1a; 1 .选修课信息(1).xlsx&#xff0c;信息如下&#xff1a; 2 .学生选课信息表.xls&#xff0c;信息如下 3.任务 二、将文件中的信息导入数据库 …
阅读更多...
脱水蔬菜开启蔬菜产业发展新道路 国内市场正不断扩大

脱水蔬菜开启蔬菜产业发展新道路 国内市场正不断扩大

根据观研报告网发布的《中国脱水蔬菜市场发展现状研究与投资前景预测报告&#xff08;2022-2029年&#xff09;》显示&#xff0c;脱水蔬菜又称复水菜&#xff0c;是将新鲜蔬菜经过洗涤、烘干等加工制作&#xff0c;脱去蔬菜中大部分水分后而制成的一种干菜&#xff0c;食用时只…
阅读更多...
Netty实战与源码剖析（一）——浅谈NIO编程

Netty实战与源码剖析（一）——浅谈NIO编程

1 前言 很久之前就想写与Netty相关的博客了&#xff0c;但由于个人时间安排的问题一直拖到了现在&#xff0c;借助这个机会&#xff0c;重新温习Java高级编程的同时&#xff0c;也把Netty实战以及源码剖析分享给各位读者。 2 Netty是什么&#xff1f; Netty is a NIO client …
阅读更多...
Spring—Spring IOC

Spring—Spring IOC

文章目录Spring IOC容器1. 什么是IOC2.IOC的核心原理IOC如何充当对象容器&#xff1f;具体什么作为对象容器&#xff1f;IOC的核心原理图3. IOC容器的底层原理IOC的实现&#xff0c;依赖于以下3门技术上边提到的三种技术如何实现IOC的呢&#xff1f;4.IOC(接口)————————…
阅读更多...
官宣！CATCTF不日开赛！！

官宣！CATCTF不日开赛！！

各位极客请注意&#xff01; 2022.12.31 10:00—2023.01.01 17:00 攻防世界 x Nepnep x CATCTF 即将开赛 请做好参战准备&#xff01; 本场赛事由攻防世界提供技术与平台支撑 部分赛题募集自各位爱猫人士 其他题目则由Nepnep的师傅们承包 赛事运维人员也将由志愿者师傅们…
阅读更多...
一起Talk Android吧（第四百四十八回：UI控件之Switch）

一起Talk Android吧（第四百四十八回：UI控件之Switch）

文章目录概念介绍使用方法内容总结各位看官们大家好&#xff0c;上一回中咱们说的例子是"UI控件之TimePickerDialog",这一回中说的例是" UI控件之Switch"。闲话休提&#xff0c;言归正转&#xff0c;让我们一起Talk Android吧&#xff01;概念介绍 我们在…
阅读更多...
设计模式~简单工厂模式

设计模式~简单工厂模式

简单工厂模式是由一个工厂对象决定创建出哪一种产品类的实例。 工厂模式专门负责将大量有共同接口的类实例化。 工厂模式的几种形态&#xff1a; 简单工厂模式(Simple Factory)&#xff1a;又称静态工厂方法模式工厂方法模式&#xff08;Factory Method&#xff09;:又称多态…
阅读更多...
云卷云舒：2022 数据库总结从Gartner到IDC

云卷云舒：2022 数据库总结从Gartner到IDC

2022年尾已至&#xff0c;行业总结纷纷而至。Gartner 于12月13日发布了其 “2022 云数据库管理系统魔力象限”IDC于12月15日发布了 “2022年上半年中国关系型数据库软件市场跟踪报告”Gartner 的魔力象限&#xff0c;聚焦在 "Cloud Database"&#xff0c;不再进行本地…
阅读更多...
《Redis实战篇》三、优惠券秒杀

《Redis实战篇》三、优惠券秒杀

文章目录3.1 全局唯一ID3.2 Redis实现全局唯一Id3.3 添加优惠卷3.4 实现秒杀下单3.5 库存超卖问题分析3.6 乐观锁解决超卖问题3.7 优惠券秒杀-一人一单3.8 集群环境下的并发问题3.1 全局唯一ID 每个店铺都可以发布优惠券&#xff1a; 当用户抢购时&#xff0c;就会生成订单并保…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023