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

相关文章

更改docker默认数据目录的方法步骤

更改docker默认数据目录的方法步骤

《更改docker默认数据目录的方法步骤》本文主要介绍了更改docker默认数据目录的方法步骤,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一... 目录1.查看docker是否存在并停止该服务2.挂载镜像并安装rsync便于备份3.取消挂载备份和迁
阅读更多...
React实现原生APP切换效果

React实现原生APP切换效果

《React实现原生APP切换效果》最近需要使用Hybrid的方式开发一个APP,交互和原生APP相似并且需要IM通信,本文给大家介绍了使用React实现原生APP切换效果,文中通过代码示例讲解的非常... 目录背景需求概览技术栈实现步骤根据 react-router-dom 文档配置好路由添加过渡动画使用
阅读更多...
使用Vue.js报错：ReferenceError: “Vue is not defined“ 的原因与解决方案

使用Vue.js报错：ReferenceError: “Vue is not defined“ 的原因与解决方案

《使用Vue.js报错：ReferenceError:“Vueisnotdefined“的原因与解决方案》在前端开发中,ReferenceError:Vueisnotdefined是一个常见... 目录一、错误描述二、错误成因分析三、解决方案1. 检查 vue.js 的引入方式2. 验证 npm 安装3.
阅读更多...
vue如何监听对象或者数组某个属性的变化详解

vue如何监听对象或者数组某个属性的变化详解

《vue如何监听对象或者数组某个属性的变化详解》这篇文章主要给大家介绍了关于vue如何监听对象或者数组某个属性的变化,在Vue.js中可以通过watch监听属性变化并动态修改其他属性的值,watch通... 目录前言用watch监听深度监听使用计算属性watch和计算属性的区别在vue 3中使用watchE
阅读更多...
python解析HTML并提取span标签中的文本

python解析HTML并提取span标签中的文本

《python解析HTML并提取span标签中的文本》在网页开发和数据抓取过程中,我们经常需要从HTML页面中提取信息,尤其是span元素中的文本,span标签是一个行内元素,通常用于包装一小段文本或... 目录一、安装相关依赖二、html 页面结构三、使用 BeautifulSoup javascript
阅读更多...
Vue3 的 shallowRef 和 shallowReactive：优化性能

Vue3 的 shallowRef 和 shallowReactive：优化性能

大家对 Vue3 的 ref 和 reactive 都很熟悉，那么对 shallowRef 和 shallowReactive 是否了解呢？ 在编程和数据结构中，“shallow”（浅层）通常指对数据结构的最外层进行操作，而不递归地处理其内部或嵌套的数据。这种处理方式关注的是数据结构的第一层属性或元素，而忽略更深层次的嵌套内容。 1. 浅层与深层的对比 1.1 浅层（Shallow） 定义
阅读更多...
这15个Vue指令，让你的项目开发爽到爆

这15个Vue指令，让你的项目开发爽到爆

1. V-Hotkey 仓库地址: github.com/Dafrok/v-ho… Demo: 戳这里 https://dafrok.github.io/v-hotkey 安装: npm install --save v-hotkey 这个指令可以给组件绑定一个或多个快捷键。你想要通过按下 Escape 键后隐藏某个组件，按住 Control 和回车键再显示它吗？小菜一碟： <template
阅读更多...
【 html+css 绚丽Loading 】000046 三才归元阵

【 html+css 绚丽Loading 】000046 三才归元阵

前言：哈喽，大家好，今天给大家分享html+css 绚丽Loading！并提供具体代码帮助大家深入理解，彻底掌握！创作不易，如果能帮助到大家或者给大家一些灵感和启发，欢迎收藏+关注哦 💕 目录 📚一、效果📚二、信息💡1.简介：💡2.外观描述：💡3.使用方式：💡4.战斗方式：💡5.提升：💡6.传说： 📚三、源代码，上代码，可以直接复制使用🎥效果🗂️目录✍️
阅读更多...
【前端学习】AntV G6-08 深入图形与图形分组、自定义节点、节点动画（下）

【前端学习】AntV G6-08 深入图形与图形分组、自定义节点、节点动画（下）

【课程链接】 AntV G6：深入图形与图形分组、自定义节点、节点动画（下）_哔哩哔哩_bilibili 本章十吾老师讲解了一个复杂的自定义节点中，应该怎样去计算和绘制图形，如何给一个图形制作不间断的动画，以及在鼠标事件之后产生动画。（有点难，需要好好理解） <!DOCTYPE html><html><head><meta charset="UTF-8"><title>06
阅读更多...
禁止平板,iPad长按弹出默认菜单事件

禁止平板,iPad长按弹出默认菜单事件

通过监控按下抬起时间差来禁止弹出事件，把以下代码写在要禁止的页面的页面加载事件里面即可     var date;document.addEventListener('touchstart', event => {date = new Date().getTime();});document.addEventListener('touchend', event => {if (new
阅读更多...

Copyright China编程 23002807@qq.com

沪ICP备2023033072号-2