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

相关文章

部署Vue项目到服务器后404错误的原因及解决方案

部署Vue项目到服务器后404错误的原因及解决方案

《部署Vue项目到服务器后404错误的原因及解决方案》文章介绍了Vue项目部署步骤以及404错误的解决方案,部署步骤包括构建项目、上传文件、配置Web服务器、重启Nginx和访问域名,404错误通常是... 目录一、vue项目部署步骤二、404错误原因及解决方案错误场景原因分析解决方案一、Vue项目部署步骤
阅读更多...
前端原生js实现拖拽排课效果实例

前端原生js实现拖拽排课效果实例

《前端原生js实现拖拽排课效果实例》：本文主要介绍如何实现一个简单的课程表拖拽功能,通过HTML、CSS和JavaScript的配合,我们实现了课程项的拖拽、放置和显示功能,文中通过实例代码介绍的... 目录1. 效果展示2. 效果分析2.1 关键点2.2 实现方法3. 代码实现3.1 html部分3.2
阅读更多...
CSS弹性布局常用设置方式

CSS弹性布局常用设置方式

《CSS弹性布局常用设置方式》文章总结了CSS布局与样式的常用属性和技巧,包括视口单位、弹性盒子布局、浮动元素、背景和边框样式、文本和阴影效果、溢出隐藏、定位以及背景渐变等,通过这些技巧,可以实现复杂... 一、单位元素vm 1vm 为视口的1%vh 视口高的1%vmin 参照长边vmax 参照长边re
阅读更多...
CSS3中使用flex和grid实现等高元素布局的示例代码

CSS3中使用flex和grid实现等高元素布局的示例代码

《CSS3中使用flex和grid实现等高元素布局的示例代码》：本文主要介绍了使用CSS3中的Flexbox和Grid布局实现等高元素布局的方法，通过简单的两列实现、每行放置3列以及全部代码的展示，展示了这两种布局方式的实现细节和效果，详细内容请阅读本文，希望能对你有所帮助... 过往的实现方法是使用浮动加
阅读更多...
css渐变色背景|＜gradient示例详解

css渐变色背景|＜gradient示例详解

《css渐变色背景|＜gradient示例详解》CSS渐变是一种从一种颜色平滑过渡到另一种颜色的效果,可以作为元素的背景,它包括线性渐变、径向渐变和锥形渐变，本文介绍css渐变色背景|＜gradien... 使用渐变色作为背景可以直接将渐China编程变色用作元素的背景，可以看做是一种特殊的背景图片。（是作为背
阅读更多...
CSS自定义浏览器滚动条样式完整代码

CSS自定义浏览器滚动条样式完整代码

《CSS自定义浏览器滚动条样式完整代码》：本文主要介绍了如何使用CSS自定义浏览器滚动条的样式，包括隐藏滚动条的角落、设置滚动条的基本样式、轨道样式和滑块样式，并提供了完整的CSS代码示例，通过这些技巧，你可以为你的网站添加个性化的滚动条样式，从而提升用户体验，详细内容请阅读本文，希望能对你有所帮助...
阅读更多...
css实现图片旋转功能

css实现图片旋转功能

《css实现图片旋转功能》：本文主要介绍了四种CSS变换效果：图片旋转90度、水平翻转、垂直翻转，并附带了相应的代码示例，详细内容请阅读本文，希望能对你有所帮助... 一 css实现图片旋转90度.icon{ -moz-transform:rotate(-90deg); -webkit-transfo
阅读更多...
vue基于ElementUI动态设置表格高度的3种方法

vue基于ElementUI动态设置表格高度的3种方法

《vue基于ElementUI动态设置表格高度的3种方法》ElementUI+vue动态设置表格高度的几种方法,抛砖引玉,还有其它方法动态设置表格高度,大家可以开动脑筋... 方法一、css + js的形式这个方法需要在表格外层设置一个div，原理是将表格的高度设置成外层div的高度，所以外层的div需要
阅读更多...
Vue项目中Element UI组件未注册的问题原因及解决方法

Vue项目中Element UI组件未注册的问题原因及解决方法

《Vue项目中ElementUI组件未注册的问题原因及解决方法》在Vue项目中使用ElementUI组件库时,开发者可能会遇到一些常见问题,例如组件未正确注册导致的警告或错误,本文将详细探讨这些问题... 目录引言一、问题背景1.1 错误信息分析1.2 问题原因二、解决方法2.1 全局引入 Element
阅读更多...
详解如何在React中执行条件渲染

详解如何在React中执行条件渲染

《详解如何在React中执行条件渲染》在现代Web开发中,React作为一种流行的JavaScript库,为开发者提供了一种高效构建用户界面的方式,条件渲染是React中的一个关键概念,本文将深入探讨... 目录引言什么是条件渲染？基础示例使用逻辑与运算符（&&）使用条件语句列表中的条件渲染总结引言在现代
阅读更多...

Copyright China编程 23002807@qq.com

沪ICP备2023033072号-2