前端vue入门(纯代码)19

news2025/11/1 3:17:54

不管何时何地，永远保持热爱，永远积极向上！！！

【21.Vue中的插槽slot】

  • 问题：插槽（slot）是什么？兄弟们也可以点这里去看这位兄弟的博客，写的比我详细！！！

    • 【理解1】：插槽就是子组件中的提供给父组件使用的一个占位符，用<slot></slot> 表示，父组件可以在这个占位符中填充任何模板代码，如 HTML、组件等，填充的内容会替换子组件的<slot></slot>标签。简单理解就是子组件中留下个“坑”，父组件可以使用指定内容来补“坑”。
    • 【理解2】：插槽用于决定将所携带的内容，插入到指定的某个位置，从而使模板分块，具有模块化的特质和更大的重用性。插槽显不显示、怎样显示是由父组件来控制的；而插槽在哪里显示就由子组件来进行控制。

  • 问题：三种插槽（slot）：

    • 1、默认插槽 

      <slot></slot>

    • 2、具名插槽 

       <slot name="名称"></slot>

    • 3、作用域插槽 

      <slot ：自定义 name = data 中的属性对象></slot>

1.默认插槽slot

  • 【父组件：App；子组件：Category】
  • 在子组件：Category中定义一个默认插槽。
<template>
  <div class="about">
    <h1>这里是子组件Category</h1>
    <!-- 定义一个默认插槽【坑】 -->
    <slot></slot>
  </div>
</template>
  • 在App父组件中的子组件<category>--这里东西放入子组件的插槽中--</category>。
<template>
  <div class="container">
    <h1>这里是父组件</h1>
    <category title="美食">
        <img src="http://rwt9uxba6.hd-bkt.clouddn.com/9999.png" />
    </category>
  </div>
</template>
  • 但是，如果在子组件：Category中定义多个默认插槽【比如：两个默认插槽】。

那么，就会把要放入插槽中的东西复制几份【比如：两个默认插槽就复制两份】

<template>
  <div class="about">
    <h1>这里是子组件Category</h1>
    <!-- 定义一个默认插槽【坑】 -->
    <slot></slot>
    <slot></slot>
  </div>
</template>
  • 自己的例子展示：

上面案例完整代码：

main.js

//引入Vue
import Vue from 'vue'
//引入App
import App from './App.vue'
//引入vue-resource插件
// import vueResource from 'vue-resource';
//关闭Vue的生产提示
Vue.config.productionTip = false
//使用插件
// Vue.use(vueResource)

//创建vm
new Vue({
	el:'#app',
	render: h => h(App),
  // 生命周期钩子beforeCreate中模板未解析，且this是vm
  beforeCreate() {
    // this:指的是vm
		Vue.prototype.$bus = this  //安装全局事件总线$bus
	}
})

App.vue

<template>
	<div class="container">
		<category title="美食">
			<img src="http://rwt9uxba6.hd-bkt.clouddn.com/9999.png" />
		</category>
		<category title="游戏">
			<ul>
				<li v-for="(g, index) in games" :key="index">{{ g }}</li>
			</ul>
		</category>
		<category title="电影">
			<video
				src="http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4"
			></video>
		</category>
	</div>
</template>

<script>
import Category from './components/Category';
export default {
	name: 'App',
	components: { Category },
	data() {
		return {
			foods: ['火锅', '烧烤', '小龙虾', '牛排'],
			games: ['红色警戒', '穿越火线', '劲舞团', '超级玛丽'],
			films: [
				'《教父》',
				'《拆弹专家》',
				'《你好，李焕英》',
				'《尚硅谷》',
			],
		};
	},
};
</script>
<style scoped>
.container {
	/* 弹性布局 */
	display: flex;
	/* 弹性项目平均分布在该行上，两边留有一半的间隔空间。 */
	justify-content: space-around;
}
</style>

Category.vue

<template>
	<div class="category">
		<h3>{{ title }}分类</h3>
		<!-- 定义一个插槽（挖个坑，等着组件的使用者进行填充） -->
		<slot>我是一些默认值，当使用者没有传递具体结构时，我会出现</slot>
	</div>
</template>

<script>
export default {
	name: 'Category',
	// 父组件给子组件传递数据：props
	props: ['title'],
};
</script>

<style scoped>
.category {
	background-color: aquamarine;
  width: 200px;
  height: 300px;
}
h3{
  background-color: orange;
  /* 为文本或img标签等一些内联对象（或与之类似的元素）的居中。 */
  text-align: center;
}
img {
  /* 占父元素的比例 */
	width: 100%;
}
video {
   /* 占父元素的比例 */
	width: 100%;
}
</style>

2.具名插槽slot

  • 什么是具名插槽？

其实就是在子组件中定义插槽时，给对应的插槽分别起个名字，方便后边插入父组件将根据name来填充对应的内容。

<slot name="one"></slot>
<slot name="two"></slot>

  • 【父组件：App；子组件：Category】

  • 在子组件：Category中定义两个具名插槽。

<template>
  <div class="about">
    <h1>T这里是子组件Category</h1>
    <!-- 给插槽加了个name属性，就是所谓的具名插槽了 -->
    <slot name="one"></slot>
    <slot name="two"></slot>
  </div>
</template>
  • 在App父组件中的子组件<category>【这里东西放入子组件的插槽中，有插槽名的一一对应放入】</category>。
<category title="美食">
    <template slot="one">
       <p>one插槽</p>
    </template>
    <template  slot="two">
       two插槽
    </template>
</category>
  • 【注意】：要放入具名插槽的结构，最好用</template slot="插槽名">包裹起来，好处是：</template>不渲染真实DOM，结构少了一层，并且还可以用这种写法【v-slot:插槽名】：<template v-slot:插槽名>。

具名插槽案例效果展示：

具名插槽案例的完整代码：

  • <video controls></video>：video标签里面的controls属性是控制视频播放的按钮 。

父组件App.vue

<template>
	<div class="container">
		<category title="美食">
			<img slot="center" src="http://rwt9uxba6.hd-bkt.clouddn.com/9999.png" />
            <a slot="footer" href="http://www.atguigu.com">更多美食</a>
		</category>

		<category title="游戏">
            <ul slot="center">
                <li v-for="(g, index) in games" :key="index">{{ g }}</li>
            </ul>
          <div class="footer" slot="footer">
            <a href="http://www.atguigu.com">单机游戏</a>
            <a href="http://www.atguigu.com">网络游戏</a>
          </div>
		</category>

		<category title="电影">
            <!-- controls:控制视频的播放按钮 -->
			<video 
            controls
            slot="center"
			src="http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4"
			>
           </video>
           <template slot="footer">
             <div class="footer">
                  <a href="http://www.atguigu.com">经典</a>
                  <a href="http://www.atguigu.com">热门</a>
                  <a href="http://www.atguigu.com">推荐</a>
             </div>
             <h4>欢迎前来观影</h4>
           </template>
		</category>
	</div>
</template>

<script>
import Category from './components/Category';
export default {
	name: 'App',
	components: { Category },
	data() {
		return {
			foods: ['火锅', '烧烤', '小龙虾', '牛排'],
			games: ['红色警戒', '穿越火线', '劲舞团', '超级玛丽'],
			films: [
				'《教父》',
				'《拆弹专家》',
				'《你好，李焕英》',
				'《尚硅谷》',
			],
		};
	},
};
</script>
<style scoped>
.container ,.footer{
	/* 弹性布局 */
	display: flex;
	/* 弹性项目平均分布在该行上，两边留有一半的间隔空间。 */
	justify-content: space-around;
}
h4{
    /* 为文本或img标签等一些内联对象（或与之类似的元素）的居中。 */
  text-align: center;
}
</style>

子组件Category.vue

<template>
	<div class="category">
		<h3>{{ title }}分类</h3>
		<!-- 定义一个插槽（挖个坑，等着组件的使用者进行填充） -->
		<slot name="center">我是一些默认值，当使用者没有传递具体结构时，我会出现1</slot>
    <slot name="footer">我是一些默认值，当使用者没有传递具体结构时，我会出现2</slot>
	</div>
</template>

<script>
export default {
	name: 'Category',
	// 父组件给子组件传递数据：props
	props: ['title'],
};
</script>

<style scoped>
.category {
	background-color: aquamarine;
  width: 200px;
  height: 300px;
}
h3{
  background-color: orange;
  /* 为文本或img标签等一些内联对象（或与之类似的元素）的居中。 */
  text-align: center;
}
img {
  /* 占父元素的比例 */
	width: 100%;
}
video {
   /* 占父元素的比例 */
	width: 100%;
}
</style>

3.作用域插槽【v-slot指令】

  • 什么是作用域插槽？【也可以点击此处去官方文档看】

作用域插槽的主要作用是在书写插槽内容时可以获取到插槽作用域的值。

作用域插槽就是实现在子组件自行决定自己要显示什么内容。 并且，能够让要放入插槽的内容能够访问子组件中才有的数据。【一种子给父通信的方法】

  • 可以让要放入模板中的数据一样，但是HTML结构不一样：如下面的案例中的三个小卡片放入的data一样，但是样式不一样。【一个无序、一个有序且字体有颜色、还有一个应用了后h4字体样式】

  • 要放入插槽的内容指的是：父组件中<category>里面的包裹的东西

<category title="美食">
   <template v-slot="childrenDate">
      <p>one插槽</p>
   </template>
   <div scope="childrenDate">
      <p>one插槽</p>
   </div>    
</category>
  • 此处的v-slot指令可以替换成scope和slot-scope
  • 【注意 】v-slot 只能添加在 <template> 上
  • 【模板】子组件Category要传给父组件的data:
<slot :自定义的name=子组件data中的属性或对象></slot>

  • <template> 元素中的所有内容都将会被传入相应的插槽。任何没有被包裹在带有 v-slot 的 <template> 中的内容都会被视为默认插槽的内容。

  • 【例子：Category.vue】子组件Category要传给父组件的data:

<slot :childrenDate=games></slot>

data() {
   return {
       games: ['红色警戒', '穿越火线', '劲舞团', '超级玛丽'],
   };
},
  • 【例子:App.vue】父组件App要接收子组件传过来的data:
<category title="游戏">
   <template scope="haha">
       <ul>
           <li v-for="(g,index) in haha.childrenDate" :key="index">{{g}}</li>
       </ul>
   </template>
</category>

补充一个点：

  • 【例子：Category.vue】子组件Category要传给父组件的data有两个参数:
<slot :dataOfCategory="games" :Msg="nihao"></slot>

data() {
   return {
       games: ['红色警戒', '穿越火线', '劲舞团', '超级玛丽'],
       nihao:'我是伍六七，我喜欢梅小姐！',
   };
},
  • 【例子:App.vue】父组件App要接收子组件传过来的数据haha，我们看一下它的到底是个什么玩意？？？
<category title="游戏">
   <template scope="haha">
       <ul>
           <li v-for="(g, index) in haha.dataOfCategory" :key="index">
               {{ g }}
           </li>
       </ul>
       <button @click="CategoryDate(haha)">
           <h2>点击查看子组件传过来的数据</h2>
       </button>
   </template>
</category>

methods: {
   CategoryDate(haha) {
       console.log(haha);
   },
},

结果展示：

有点看不清，那就月下观鸟：

具名插槽案例效果展示：

完整代码：

App.vue组件

<template>
	<div class="container">
		<!-- 让子组件展示的数据是无序的 -->
		<category title="游戏">
			<template scope="haha">
				<ul>
					<li v-for="(g, index) in haha.dataOfCategory" :key="index">
						{{ g }}
					</li>
				</ul>
				<button @click="CategoryDate(haha)">
					<h2>点击查看子组件传过来的数据</h2>
				</button>
			</template>
		</category>

		<!-- 让子组件展示的数据是有序的 -->
		<category title="游戏">
			<!-- 对象的解构赋值 -->
			<template slot-scope="{ dataOfCategory }">
				<ol>
					<li
						style="color: orange"
						v-for="(g, index) in dataOfCategory"
						:key="index"
					>
						{{ g }}
					</li>
				</ol>
			</template>
		</category>

		<category title="游戏">
			<template v-slot="hello">
				<h4 v-for="(g, index) in hello.dataOfCategory" :key="index">
					{{ g }}
				</h4>
			</template>
		</category>
	</div>
</template>

<script>
import Category from './components/Category';
export default {
	name: 'App',
	components: { Category },
	methods: {
		CategoryDate(haha) {
			console.log(haha);
		},
	},
};
</script>
<style scoped>
.container,
.footer {
	/* 弹性布局 */
	display: flex;
	/* 弹性项目平均分布在该行上，两边留有一半的间隔空间。 */
	justify-content: space-around;
}
h4 {
	/* 为文本或img标签等一些内联对象（或与之类似的元素）的居中。 */
	text-align: center;
}
button{
  	/* 为文本或img标签等一些内联对象（或与之类似的元素）的居中。 */
	text-align: center;
  background-color: blueviolet;
}
</style>

Category.vue组件

<template>
	<div class="category">
		<h3>{{ title }}分类</h3>
		<!-- 定义一个插槽（挖个坑，等着组件的使用者进行填充） -->
		<slot :dataOfCategory="games" :Msg="nihao">我是一些默认值，当使用者没有传递具体结构时，我会出现1</slot>
	</div>
</template>

<script>
export default {
	name: 'Category',
	// 父组件给子组件传递数据：props
	props: ['title'],
  data() {
		return {
			games: ['红色警戒', '穿越火线', '劲舞团', '超级玛丽'],
      nihao:'我是伍六七，我喜欢梅小姐！',
		};
	},
};
</script>

<style scoped>
.category {
	background-color: aquamarine;
  width: 200px;
  height: 300px;
}
h3{
  background-color: orange;
  /* 为文本或img标签等一些内联对象（或与之类似的元素）的居中。 */
  text-align: center;
}
img {
  /* 占父元素的比例 */
	width: 100%;
}
video {
   /* 占父元素的比例 */
	width: 100%;
}
</style>
插槽总结：

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

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

  3. 使用方式：

    1. 默认插槽：

      父组件中：
    <Category>
       <div>html结构1</div>
    </Category>
子组件中：
    <template>
        <div>
           <!-- 定义插槽 -->
           <slot>插槽默认内容...</slot>
        </div>
    </template>

    2. 具名插槽：

      父组件中：
    <Category>
        <template slot="center">
          <div>html结构1</div>
        </template>

        <template v-slot:footer>
           <div>html结构2</div>
        </template>
    </Category>
子组件中：
    <template>
        <div>
           <!-- 定义插槽 -->
           <slot name="center">插槽默认内容...</slot>
           <slot name="footer">插槽默认内容...</slot>
        </div>
    </template>

    3. 作用域插槽：

      1. 理解：数据在组件的自身，但根据数据生成的结构需要组件的使用者来决定。（games数据在Category组件中，但使用数据所遍历出来的结构由App组件决定）

      2. 具体编码：【见上面的案例的代码】

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

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

相关文章

Linux--查询指令所在路径：which

Linux--查询指令所在路径：which

语法&#xff1a; which 指令 示例&#xff1a; ①查询ls所在路径
阅读更多...
更进一步！可视化一切递归算法！

更进一步！可视化一切递归算法！

学算法认准 labuladong 后台回复课程查看精品课 点击卡片可搜索文章&#x1f447; 在线学习网站&#xff1a; https://labuladong.gitee.io/algo/ 上次我发布了算法代码可视化功能&#xff0c;适配了我的网站和我的系列插件&#xff0c;最近我修复了一些 bug 并增加了一些功能优…
阅读更多...
windows系统根据端口查询pid并结束进程

windows系统根据端口查询pid并结束进程

用管理员权限打开命令指示符,输入命令&#xff1a; 1、查看被占用端口所对应的 PID netstat -aon|findstr “端口号” 2、查看指定PID的进程 tasklist|findstr ”57672” 3、结束进程 taskkill -pid 进程号 -f
阅读更多...
Unity VR 开发教程：Meta Quest 一体机开发 （二）混合现实 MR 透视 Passthrough 环境配置

Unity VR 开发教程：Meta Quest 一体机开发 （二）混合现实 MR 透视 Passthrough 环境配置

文章目录 &#x1f4d5;教程说明&#x1f4d5;配置透视的串流调试功能&#x1f4d5;第一步&#xff1a;设置 OVRManager&#x1f4d5;第二步&#xff1a;添加 OVRPassthroughLayer 脚本&#x1f4d5;第三步&#xff1a;在场景中添加虚拟物体&#x1f4d5;第四步&#xff1a;删除…
阅读更多...
c++摘花生

c++摘花生

先看题目&#xff1a; Hello Kitty想摘点花生送给她喜欢的米老鼠。 她来到一片有网格状道路的矩形花生地(如下图)&#xff0c;从西北角进去&#xff0c;东南角出来。 地里每个道路的交叉点上都有种着一株花生苗&#xff0c;上面有若干颗花生&#xff0c;经过一株花生苗就能摘…
阅读更多...
html前端输入框模糊查询2

html前端输入框模糊查询2

1、一个页面内多个模糊查询情况&#xff1a; <!DOCTYPE html> <html> <head> <meta charset"UTF-8" /> <meta name"viewport" content"widthdevice-width, initial-scale1.0, user-scalable0, minimum-scale1.0, maximum-…
阅读更多...
网络安全合规-渗透工程师

网络安全合规-渗透工程师

首先放一张渗透工程师薪资招聘。 各类网络空间人才缺口高达97%&#xff0c;专业人才供不应求。市场环境对网络安全人才求贤若渴&#xff0c;渗透测试工程师尤为紧俏&#xff0c;企业高薪求才&#xff0c;薪资一涨再涨&#xff01; 工资高&#xff0c;待遇好&#xff0c;但是有…
阅读更多...
大模型浪潮下的平台、框架、AI编译器和芯片架构丨2023智源大会精彩回顾

大模型浪潮下的平台、框架、AI编译器和芯片架构丨2023智源大会精彩回顾

导读 在大模型时代&#xff0c;应该如何组织AI系统使其能力与市场需求对齐&#xff0c;是底层的AI工程师需要不断思考和探讨的话题。围绕这一问题&#xff0c;在2023智源大会AI系统分论坛上&#xff0c;从事AI框架开发、芯片研发和AI编译器优化的专家汇聚在一起&#xff0c;共同…
阅读更多...
广告行业中那些趣事系列63：使用chatgpt类大模型进行文本分类任务

广告行业中那些趣事系列63：使用chatgpt类大模型进行文本分类任务

导读&#xff1a;本文是“数据拾光者”专栏的第六十三篇文章&#xff0c;这个系列将介绍在广告行业中自然语言处理和推荐系统实践。本篇主要介绍了使用chatgpt类大语言模型进行文本分类任务&#xff0c;对于希望使用chatgpt类大语言模型上进行数据标注、文本分类和关键词抽取等…
阅读更多...
debug调试高级用法

debug调试高级用法

文章目录 前言一、如何给程序加断点,并调试二、开始调试1.断点查看2.查看所有断点,去掉断点,批量去断点3. 断点改值4. 断点条件 总结 前言 在开发调试中,如果你不会debug调试,一般情况下,就只能控制台打印,然后一遍一遍重启了,所有debug是必不可少的技能,尤其当遇到问题的时候…
阅读更多...
xxl-job的实践

xxl-job的实践

pom.xml文件导入xxl-job 包 <dependency><groupId>com.xuxueli</groupId><artifactId>xxl-job-core</artifactId><version>${xxl-job.version}</version></dependency><xxl-job.version>2.3.1</xxl-job.version> …
阅读更多...
Android学习日志 二、Button组件调用函数

Android学习日志 二、Button组件调用函数

文章目录 Button组件调用函数配置代码By-Round Moon Button组件调用函数 Android Studio 版本:2022.2.1 patch 2 配置 接日志一的操作&#xff0c;我们创建一个空项目&#xff0c;名字可以自己起 等待构建完成后&#xff0c;我们创建一个模块 创建一个activity 在相应的x…
阅读更多...
Spring Boot中RabbitMQ自动配置的介绍、原理和使用

Spring Boot中RabbitMQ自动配置的介绍、原理和使用

Spring Boot中RabbitMQ自动配置的介绍、原理和使用 引言 RabbitMQ是一种高性能的消息队列系统&#xff0c;它支持多种消息协议和丰富的功能&#xff0c;如消息路由、消息确认、消息重试、死信队列等。在Spring Boot中&#xff0c;我们可以通过自动配置的方式来使用RabbitMQ。…
阅读更多...
碳排放预测模型 | Python实现基于时间序列趋势外推的碳排放预测模型（线性趋势、指数趋势、平方趋势）

碳排放预测模型 | Python实现基于时间序列趋势外推的碳排放预测模型（线性趋势、指数趋势、平方趋势）

文章目录 效果一览文章概述源码设计参考资料效果一览 文章概述 碳排放预测模型 | Python实现基于时间序列趋势外推的碳排放预测模型（线性趋势、指数趋势、平方趋势） 源码设计 import pandas as pd import numpy as np import scipy
阅读更多...
SpringBoot（三）SpringBoot热部署

SpringBoot（三）SpringBoot热部署

在开发SpringBoot项目过程中&#xff0c;你有没有遇到如下的问题&#xff1a;每次修改java代码&#xff0c;都得重新run一下Application才会生效。起初我也遇到了这样的问题&#xff0c;但SpringBoot这种成熟的框架&#xff0c;怎么可能不支持热部署呢。本篇&#xff0c;我们就…
阅读更多...
Ubuntu虚拟机文件系统挂了：Failure: File system check of the root filesystem failed

Ubuntu虚拟机文件系统挂了：Failure: File system check of the root filesystem failed

问题描述 太久不用虚拟机Ubuntu 20.04&#xff0c;就把虚拟机移动到了移动硬盘中&#xff0c;然后虚拟机挂了。准确地说是文件系统挂了。由于没有保护好现场&#xff0c;出错位置是一个/dev/xxx&#xff0c;提示Failure: File system check of the root filesystem failed。 …
阅读更多...
10 DCT变换对灰度图像压缩（matlab程序）

10 DCT变换对灰度图像压缩（matlab程序）

1.简述 一、设计任务 1、在图像的变换和压缩中&#xff0c;常常用到离散余弦变换&#xff08;DCT&#xff09;。DCT变换用于图像的压缩实例。请在测试图像中验证你的结论。 2、请编程实现图像的真彩色增强。 3、通过直方图均衡化的方法实现图像的灰度变换&#xff0c;在测试…
阅读更多...
threejs材质

threejs材质

个人博客地址: https://cxx001.gitee.io 前言 前面简单的介绍了材质&#xff0c;你已经了解到材质结合几何体就可以创建网格&#xff0c;网格对象才可以添加到Threejs渲染的场景中。材质就像物体的皮肤&#xff0c;决定了几何体的外表。如&#xff0c;几何体看起来是否像金属…
阅读更多...
GPT模型训练实践

GPT模型训练实践

一、GPT模型解释 GPT 模型是 Generative Pretrained Transformers 的缩写&#xff0c;是一种先进的深度学习模型&#xff0c;旨在生成类人文本。GPT 的三个组成部分&#xff0c;即 Generative、Pre-Trained 和 Transformer&#xff0c;其解释如下&#xff1a; 生成&#xff1…
阅读更多...
【CCF计算领域学术会议介绍：2024日程安排、CCF会议deadline汇总、2022年录用率】

【CCF计算领域学术会议介绍：2024日程安排、CCF会议deadline汇总、2022年录用率】

CCF计算领域学术会议介绍&#xff1a;2024日程安排、CCF会议deadline汇总、2022年录用率 0、目录 1、2024日程安排及deadline汇总2、会议介绍及2022年录用率 1、2024日程安排及deadline汇总 1、Conference List 这个网站汇总了CCF学术会议2023及即将开启的2024学术会议&…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023