一、插槽Slot1.1.插槽Slot的作用⭐⭐ 初识插槽:为了让这个组件具备更强的通用性，我们不能将组件中的内容限制为固定的div、span等等这些元素；【相关推荐：Vuejs视频教程】比如某种情况下我们使用组件，希望组件显示的是一个按钮，
⭐⭐
初识插槽:
div、span等等这些元素；【相关推荐：Vuejs视频教程】换句话说就是，我们要是想在一个组件标签中添加新的内容，那么我们就需要在该组件内声明一个插槽，不然，添加的新内容不会被渲染
⭐⭐
使用插槽：
slot元素作为插槽slot标签中设置一个默认内容使用插槽案例：
父组件
App.vue
<template>
<div class="app">
<!-- 内容是button -->
<show-message title="哈哈哈">
<button>我是按钮元素</button>
</show-message>
<!-- 内容是超链接 -->
<show-message>
<a href="#">百度一下</a>
</show-message>
<!-- 没有值传递 -->
<show-message></show-message>
</div>
</template>
子组件showMessage.vue
<template>
<h2>{{title}}</h2>
<div class="content">
<slot>
<p>我是默认值</p>
</slot>
</div>
</template>
showMessage里面，我们给它一个插槽，App.vue, 我们给showMessage三次复用，一次为按钮，一次为a标签，一次什么也不加一个为按钮，一个为a链接，一个为插槽默认的p标签我们可以看出来
⭐⭐
希望达到的效果是插槽对应内容的显示，这个时候我们就可以使用具名插槽：
slot 元素有一个特殊的 attribute：name； name 的slot，会带有隐含的名字 default；template标签, 并在template中使用#父组件App.vue
<template>
<nav-bar>
<template v-slot:left>
<button>返回</button>
</template>
<template v-slot:center>
<span>内容</span>
</template>
<template v-slot:right>
<a href="#">登录</a>
</template>
</nav-bar>
</template>
子组件NavBar.vue
(颜色啥的CSS里面自己可以调，这里就不放了）
<template>
<div class="nav-bar">
<div class="left">
<slot name="left">left</slot>
</div>
<div class="center">
<slot name="center">center</slot>
</div>
<div class="right">
<slot name="right">right</slot>
</div>
</div>
</template>
效果图：
达到的效果是插槽对应的显示
所以这就是具名插槽的作用
⭐⭐
动态插槽名
通过 v-slot:[dynamicSlotName]方式动态绑定一个名称；
Ps:还有作用域插槽，我目前还不是很理解，先不写了~
以上就是浅析Vue中插槽Slot的作用和具名插槽的详细内容，更多请关注编程网其它相关文章！
--结束END--
本文标题: 浅析Vue中插槽Slot的作用和具名插槽
本文链接: https://www.lsjlt.com/news/173465.html(转载时请注明来源链接)
有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341
下载Word文档到电脑，方便收藏和打印～
2023-05-25
2023-05-25
2023-05-25
2023-05-25
2023-05-25
2023-05-24
2023-05-24
2023-05-24
2023-05-24
2023-05-24
回答
回答
回答
回答
回答
回答
回答
回答
回答
回答
官方手机版
微信公众号
商务合作
0