【Vue】 第十六部分 插槽（默认插槽、具名插槽、作用域插槽）

2024-04-22 00:18
文章标签 javascript vue 默认 部分 frontend 作用域 插槽 第十六 具名

本文主要是介绍【Vue】 第十六部分 插槽（默认插槽、具名插槽、作用域插槽），希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

【Vue】 第十六部分 插槽（默认插槽、具名插槽、作用域插槽）

文章目录

  • 【Vue】 第十六部分 插槽（默认插槽、具名插槽、作用域插槽）
  • 16 . 插槽
    • 16.1 默认插槽
      • 16.1.1 不使用插槽的案例图示
      • 16.1.2 默认插槽
      • 16.1.3 默认插槽的结构和案例
    • 16.2 具名插槽
      • 16.2.1 具名插槽案例示图
      • 16.2.2 具名插槽的结构和案例
    • 16.3 作用域插槽
      • 16.3.1 案例示图
  • 总结

16 . 插槽

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

16.1 默认插槽


16.1.1 不使用插槽的案例图示

在这里插入图片描述


App组件

<template><div class="box"><category :listdata = "food" title="美食"></category><category :listdata = "game" title="游戏"></category><category :listdata = "movie" title="电影"></category></div>
</template><script>
import Category from './components/category.vue'
export default {components:{Category},data(){return{food:["兰州拉面","烤羊肉","披萨","锅边糊"],game:["英雄联盟","和平精英","原神","我的世界"],movie:["你好,李焕英","西虹市首富","这个杀手不太冷静","拳王妈妈"]}}
}
</script><style>
.box{display: flex;justify-content: space-around;
}</style>

category组件

<template><div class="wrapper"><h1>{{title}}</h1><ul><li v-for="(list,index) in listdata" :key="index">{{list}}</li></ul></div>
</template><script>
export default {props:["listdata","title"]
}
</script><style scoped>.wrapper{width: 400px;height:500px;background-color: bisque;}h1{text-align: center;margin-bottom: 60px;}ul{padding: 0;}li{text-align: center;list-style: none;font-size: 30px;margin-top: 20px;}
</style>

16.1.2 默认插槽

需求：给美食加图片，给电影加视频，游戏不变

在这里插入图片描述

16.1.3 默认插槽的结构和案例

在父组件中使用子组件标签，在子组件标签中写html结构，html结构将根据slot（插槽）的位置进行插入

父组件：
<category><div>html结构</div>
</category>子组件：
<category>//定义插槽<slot>可以指定默认内容</slot>
</category>

App.vue

<template><div class="box"><category title="美食"><img 			src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg09.viwik.com%2Fimages%2F20180701%2Ftooopen_sy_052538253829965.jpg&refer=http%3A%2F%2Fimg09.viwik.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1648649484&t=4396d8c36bd8f4802c6ad8498ca83cca" alt=""></category><category title="游戏"><ul><li v-for="(g,index) in game" :key="index">{{g}}</li></ul></category><category title="电影"><video controls src="https://www.bilibili.com/bangumi/play/ep430726?spm_id_from=333.1007.partition_recommend"></video></category></div>
</template><script>
import Category from './components/category.vue'
export default {components:{Category},data(){return{food:["兰州拉面","烤羊肉","披萨","锅边糊"],game:["英雄联盟","和平精英","原神","我的世界"],movie:["你好,李焕英","西虹市首富","这个杀手不太冷静","拳王妈妈"]}}
}
</script><style>
.box{display: flex;justify-content: space-around;
}</style>

category组件

<template><div class="wrapper"><h1>{{title}}</h1><slot></slot></div>
</template><script>
export default {props:["title"]
}
</script><style scoped>.wrapper{width: 400px;height:500px;background-color: bisque;}h1{text-align: center;margin-bottom: 60px;}ul{padding: 0;}li{text-align: center;list-style: none;font-size: 30px;margin-top: 20px;}img{width: 100%;}video{width: 100%;}
</style>

16.2 具名插槽


16.2.1 具名插槽案例示图

定义：顾名思义就是给插槽取名

需求：使用多个插槽分别放在中间和和底部

在这里插入图片描述


16.2.2 具名插槽的结构和案例

和默认插槽相比就是多了个取名，将html结构放到指定的插槽里

父组件：
<category><template slot = "xxx"><div>html结构</div></template>
</category><category><template v-slot:yyy>  //注意：v-slot只能在template中使用<div>html结构</div></template>
</category>子组件：
<category>//定义插槽<slot name = "xxx">可以指定默认内容</slot><slot name = "yyy">可以指定默认内容</slot>
</category>

App组件

<template><div class="box"><category title="美食"><!-- 使用slot --><img slot="center" src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg09.viwik.com%2Fimages%2F20180701%2Ftooopen_sy_052538253829965.jpg&refer=http%3A%2F%2Fimg09.viwik.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1648649484&t=4396d8c36bd8f4802c6ad8498ca83cca" alt=""><div class="food"  slot="footer"><a href="#" target="_blank" class="food">更多美食</a></div></category><category title="游戏"><ul slot="center">  //使用插槽<li v-for="(g,index) in game" :key="index">{{g}}</li></ul><div slot="footer" class="foot"><a href="#" target="_blank">热门</a><a href="#" target="_blank">更多</a></div></category><category title="电影"><video slot="center" controls 	src="https://v.qq.com/x/cover/mzc00200a1yhq29.html?sf=uri"></video><!-- 在这里说一下2.6版本引入的，v-slot:插槽名，但是只能使用在template上 --><template v-slot:footer><div class="inter"><a href="#" target="_blank">推荐</a><a href="#" target="_blank">最近上映</a><a href="#" target="_blank">热门</a></div><h4 slot="footer">欢迎来影院观看！</h4></template></category></div>
</template><script>
import Category from './components/category.vue'
export default {components:{Category},data(){return{food:["兰州拉面","烤羊肉","披萨","锅边糊"],game:["英雄联盟","和平精英","原神","我的世界"],movie:["你好,李焕英","西虹市首富","这个杀手不太冷静","拳王妈妈"]}}
}
</script><style>
.box,.foot,.inter{display: flex;justify-content: space-around;
}.foot,.inter{margin: 0 auto;margin-top: 50px ;width: 100px;font-size: 20px;
}
.food{margin-top: 50px;text-align: center;
}
.inter{width: 200px;
}
h4{text-align: center;
}</style>

category组件

<template><div class="wrapper"><h1>{{title}}</h1>     <!-- 具名插槽也就是给插槽取名字下面的写法就是给slot取名--><slot name="center"></slot><slot name="footer"></slot>      </div>
</template><script>
export default {props:["title"]
}
</script><style scoped>.wrapper{width: 400px;height:500px;background-color: bisque;}h1{text-align: center;margin-bottom: 60px;}ul{padding: 0;}li{text-align: center;list-style: none;font-size: 30px;margin-top: 20px;}img{width: 100%;}video{width: 100%;}
</style>

16.3 作用域插槽

games数据在Category组件中，但使用数据所遍历出来的结构由App组件决定

适用：数据不在操作的组件中，可以通过作用域插槽进行通信

说明：

  1. scope取的名可以随便取名
  2. 返回的是一个对象,所以在使用的时候是 Tree.games
  3. scope必须要配合template使用才可以
  4. 作用域插槽也可以取名

16.3.1 案例示图

需求：遍历不同的结构，且数据不在App组件中，在game组件中

在这里插入图片描述

App组件

<template><div class="box"><game title="游戏">// 接收插槽传入的数据 <template scope="Tree"><ul><li v-for="(g,index) in Tree.games" :key="index">{{g}}</li></ul></template></game><game title="游戏"><template scope="Tree"><ol><li v-for="(g,index) in Tree.games" :key="index">{{g}}</li></ol></template></game><game title="游戏"><template scope="Tree"><h4 v-for="(g,index) in Tree.games" :key="index">{{g}}</h4>       </template></game></div>
</template><script>
import game from "./components/game.vue"
export default {components:{game}
}
</script><style>.box{display: flex;justify-content: space-around;}
</style>

game组件

<template><div class="wrapper"><h2>{{title}}</h2><slot :games="games"></slot></div>
</template><script>
export default {props:["title"],data(){return{games:["和平精英","原神","英雄联盟","饥荒"]}}
}
</script><style scoped>.wrapper{width: 300px;height: 400px;background-color: antiquewhite;text-align: center;}ul,ol{padding:0;text-align: left;font-size: 20px;padding-left: 30px;}</style>

总结

以上就是今天要讲的内容，本文介绍了默认插槽、具名插槽、作用域插槽的使用方法，希望对大家有所帮助！

这篇关于【Vue】 第十六部分 插槽（默认插槽、具名插槽、作用域插槽）的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！


http://www.chinasem.cn/article/924389。

相关文章

CentOS7更改默认SSH端口与配置指南

CentOS7更改默认SSH端口与配置指南

《CentOS7更改默认SSH端口与配置指南》SSH是Linux服务器远程管理的核心工具,其默认监听端口为22,由于端口22众所周知,这也使得服务器容易受到自动化扫描和暴力破解攻击,本文将系统性地介绍... 目录引言为什么要更改 SSH 默认端口？步骤详解：如何更改 Centos 7 的 SSH 默认端口1
阅读更多...
HTML5中的Microdata与历史记录管理详解

HTML5中的Microdata与历史记录管理详解

《HTML5中的Microdata与历史记录管理详解》Microdata作为HTML5新增的一个特性，它允许开发者在HTML文档中添加更多的语义信息，以便于搜索引擎和浏览器更好地理解页面内容，本文将探... 目录html5中的Mijscrodata与历史记录管理背景简介html5中的Microdata使用M
阅读更多...
html5的响应式布局的方法示例详解

html5的响应式布局的方法示例详解

《html5的响应式布局的方法示例详解》：本文主要介绍了HTML5中使用媒体查询和Flexbox进行响应式布局的方法，简要介绍了CSSGrid布局的基础知识和如何实现自动换行的网格布局，详细内容请阅读本文，希望能对你有所帮助... 一 使用媒体查询响应式布局        使用的参数@media这是常用的
阅读更多...
HTML5表格语法格式详解

HTML5表格语法格式详解

《HTML5表格语法格式详解》在HTML语法中，表格主要通过table、tr和td3个标签构成,本文通过实例代码讲解HTML5表格语法格式，感兴趣的朋友一起看看吧... 目录一、表格1.表格语法格式2.表格属性 3.例子二、不规则表格1.跨行2.跨列3.例子一、表格在html语法中，表格主要通过< tab
阅读更多...
Vue3组件中getCurrentInstance()获取App实例,但是返回null的解决方案

Vue3组件中getCurrentInstance()获取App实例,但是返回null的解决方案

《Vue3组件中getCurrentInstance()获取App实例,但是返回null的解决方案》：本文主要介绍Vue3组件中getCurrentInstance()获取App实例,但是返回nu... 目录vue3组件中getCurrentInstajavascriptnce()获取App实例，但是返回n
阅读更多...
一文详解如何在Python中从字符串中提取部分内容

一文详解如何在Python中从字符串中提取部分内容

《一文详解如何在Python中从字符串中提取部分内容》：本文主要介绍如何在Python中从字符串中提取部分内容的相关资料,包括使用正则表达式、Pyparsing库、AST（抽象语法树）、字符串操作... 目录前言解决方案方法一：使用正则表达式方法二：使用 Pyparsing方法三：使用 AST方法四：使用字
阅读更多...
JS+HTML实现在线图片水印添加工具

JS+HTML实现在线图片水印添加工具

《JS+HTML实现在线图片水印添加工具》在社交媒体和内容创作日益频繁的今天,如何保护原创内容、展示品牌身份成了一个不得不面对的问题,本文将实现一个完全基于HTML+CSS构建的现代化图片水印在线工具... 目录概述功能亮点使用方法技术解析延伸思考运行效果项目源码下载总结概述在社交媒体和内容创作日益频繁的
阅读更多...
前端CSS Grid 布局示例详解

前端CSS Grid 布局示例详解

《前端CSSGrid布局示例详解》CSSGrid是一种二维布局系统，可以同时控制行和列，相比Flex（一维布局），更适合用在整体页面布局或复杂模块结构中,：本文主要介绍前端CSSGri... 目录css Grid 布局详解（通俗易懂版）一、概述二、基础概念三、创建 Grid 容器四、定义网格行和列五、设置行
阅读更多...
前端下载文件时如何后端返回的文件流一些常见方法

前端下载文件时如何后端返回的文件流一些常见方法

《前端下载文件时如何后端返回的文件流一些常见方法》：本文主要介绍前端下载文件时如何后端返回的文件流一些常见方法,包括使用Blob和URL.createObjectURL创建下载链接,以及处理带有C... 目录1. 使用 Blob 和 URL.createObjectURL 创建下载链接例子：使用 Blob
阅读更多...
Vuex Actions多参数传递的解决方案

Vuex Actions多参数传递的解决方案

《VuexActions多参数传递的解决方案》在Vuex中,actions的设计默认只支持单个参数传递,这有时会限制我们的使用场景,下面我将详细介绍几种处理多参数传递的解决方案,从基础到高级,... 目录一、对象封装法（推荐）二、参数解构法三、柯里化函数法四、Payload 工厂函数五、TypeScript
阅读更多...

Copyright China编程 23002807@qq.com

沪ICP备2023033072号-2