【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。

相关文章

Vue3使用router,params传参为空问题

Vue3使用router,params传参为空问题

《Vue3使用router,params传参为空问题》：本文主要介绍Vue3使用router,params传参为空问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐... 目录vue3使用China编程router,params传参为空1.使用query方式传参2.使用 Histo
阅读更多...
CSS Padding 和 Margin 区别全解析

CSS Padding 和 Margin 区别全解析

《CSSPadding和Margin区别全解析》CSS中的padding和margin是两个非常基础且重要的属性，它们用于控制元素周围的空白区域，本文将详细介绍padding和... 目录css Padding 和 Margin 全解析1. Padding: 内边距2. Margin: 外边距3. Padd
阅读更多...
CSS will-change 属性示例详解

CSS will-change 属性示例详解

《CSSwill-change属性示例详解》will-change是一个CSS属性，用于告诉浏览器某个元素在未来可能会发生哪些变化，本文给大家介绍CSSwill-change属性详解，感... will-change 是一个 css 属性，用于告诉浏览器某个元素在未来可能会发生哪些变化。这可以帮助浏览器优化
阅读更多...
CSS去除a标签的下划线的几种方法

CSS去除a标签的下划线的几种方法

《CSS去除a标签的下划线的几种方法》本文给大家分享在CSS中，去除a标签（超链接）的下划线的几种方法，本文给大家介绍的非常详细，感兴趣的朋友一起看看吧... 在 css 中，去除a标签（超链接）的下划线主要有以下几种方法：使用text-decoration属性通用选择器设置：使用a标签选择器，将tex
阅读更多...
前端高级CSS用法示例详解

前端高级CSS用法示例详解

《前端高级CSS用法示例详解》在前端开发中，CSS（层叠样式表）不仅是用来控制网页的外观和布局，更是实现复杂交互和动态效果的关键技术之一,随着前端技术的不断发展，CSS的用法也日益丰富和高级,本文将深... 前端高级css用法在前端开发中，CSS（层叠样式表）不仅是用来控制网页的外观和布局，更是实现复杂交
阅读更多...
Python将博客内容html导出为Markdown格式

Python将博客内容html导出为Markdown格式

《Python将博客内容html导出为Markdown格式》Python将博客内容html导出为Markdown格式,通过博客url地址抓取文章,分析并提取出文章标题和内容,将内容构建成html,再转... 目录一、为什么要搞？二、准备如何搞？三、说搞咱就搞！抓取文章提取内容构建html转存markdown
阅读更多...
在React中引入Tailwind CSS的完整指南

在React中引入Tailwind CSS的完整指南

《在React中引入TailwindCSS的完整指南》在现代前端开发中,使用UI库可以显著提高开发效率,TailwindCSS是一个功能类优先的CSS框架,本文将详细介绍如何在Reac... 目录前言一、Tailwind css 简介二、创建 React 项目使用 Create React App 创建项目
阅读更多...
vue使用docxtemplater导出word

vue使用docxtemplater导出word

《vue使用docxtemplater导出word》docxtemplater是一种邮件合并工具,以编程方式使用并处理条件、循环,并且可以扩展以插入任何内容,下面我们来看看如何使用docxtempl... 目录docxtemplatervue使用docxtemplater导出word安装常用语法 封装导出方
阅读更多...
Kotlin 作用域函数apply、let、run、with、also使用指南

Kotlin 作用域函数apply、let、run、with、also使用指南

《Kotlin作用域函数apply、let、run、with、also使用指南》在Kotlin开发中,作用域函数（ScopeFunctions）是一组能让代码更简洁、更函数式的高阶函数,本文将... 目录一、引言：为什么需要作用域函数？二、作用域函China编程数详解1. apply：对象配置的 “流式构建器”最
阅读更多...
Mysql删除几亿条数据表中的部分数据的方法实现

Mysql删除几亿条数据表中的部分数据的方法实现

《Mysql删除几亿条数据表中的部分数据的方法实现》在MySQL中删除一个大表中的数据时,需要特别注意操作的性能和对系统的影响,本文主要介绍了Mysql删除几亿条数据表中的部分数据的方法实现,具有一定... 目录1、需求2、方案1. 使用 DELETE 语句分批删除2. 使用 INPLACE ALTER T
阅读更多...

Copyright China编程 23002807@qq.com

沪ICP备2023033072号-2