Vue中插槽slot的使用示例详解
一、插槽是什么
插槽就是子组件中的提供给父组件使用的一个占位符，用表示，父组件可以在这个占位符中填充任何模板代码，如 HTML、组件等，填充的内容会替换子组件的标签。简单理解就是子组件中留下个“坑”，父组件可以使用指定内容来补“坑”。
插槽（slot）是 vue 为组件的封装者提供的能力。允许开发者在封装组件时，把不确定的、希望由用户指定的部分定义为插槽。
二、插槽分类
2.1 匿名插槽
匿名插槽是最基本的插槽类型，它不需要指定名称。在子组件中，你可以简单地在模板中放置一个 标签，而在父组件中使用该子组件时，可以插入任何内容来填充这个插槽。如果父组件没有提供任何内容，则插槽会默认显示其内部的备用内容。
2.2 具名插槽
具名插槽允许你为插槽指定一个名称，从而可以在一个组件中定义多个插槽，并在父组件中明确地决定内容应该填充到哪一个插槽中。在子组件中，通过为 标签添加 name 属性来定义具名插槽。
2.3 作用域插槽
作用域插槽是一种特殊的插槽，它允许子组件向父组件传递数据，使得父组件可以访问子组件的作用域中的数据。这样，父组件就可以根据子组件的状态来决定插槽的内容。在子组件中，可以通过 标签的属性来传递数据。
三、插槽的基本使用
3.1 匿名插槽
匿名：name默认为default
3.1.1 基本使用
父组件
<template>
<div>
<p>我是A组件</p>
</div>
</template>
<script>
export default {
name:'A',
data(){
return {
}
}
}
</script>子组件
<template>
<div>
<p>我是B组件</p>
</div>
</template>
<script>
export default {
name: "B",
data() {
return {};
},
};
</script>在父组件中使用子组件
如果我们想要直接在子组件标签中写内容，是不生效的，如：123，指定内容123会被丢弃。
<template>
<div>
<p>我是A组件</p>
<B>123<B/>
</div>
</template>
<script>
import B from './B.vue' //引入B组件
export default {
name:'A',
components:{ //注册B组件
B
},
data(){
return {
}
}
}
</script>应该在子组件中使用插槽slot
<template>
<div>
<p>我是B组件</p>
<!-- 插槽的使用方式 -->
<slot></slot>
</div>
</template>
<script>
export default {
name:'B',
data(){
return {
}
}
}
</script>此时，再在子组件标签中写内容，生效
<template>
<div>
<p>我是A组件</p>
<!-- 用B组件标签包裹内容，验证slot -->
<B>123</B>
</div>
</template>
<script>
import B from './B.vue'
export default {
name:'A',
components:{
B
},
data(){
return {
}
}
}
</script>上面的例子，组件渲染时，子组件的会被替换成123(即指定内容)
插槽内可以包含任何模板代码，包括HTML；也可以放其他组件。
后备(默认)内容
有时为一个插槽设置具体的后备 (也就是默认的) 内容是很有用的，它只会在没有提供内容的时候被渲染。
在B组件中
<template>
<div>
<slot><p>我是B组件</p></slot>
</div>
</template>当在父组件中不指定内容我是B组件会被渲染
当在父组件中指定内容
<B> <p>我是插槽内容</p> </B>
则这个提供的内容将会被渲染从而取代后备内容
3.2 具名插槽
具名插槽就是起了名字的插槽。
有时我们需要多个插槽，例如当我们想使用某种通用模板：
<!-- B.vue -->
<template>
<div>
<header>
<slot name="header"></slot>
</header>
<main>
<slot></slot>
</main>
<footer>
<slot name="footer"></slot>
</footer>
</div>
</template>一个不带 name 的 出口会带有隐含的名字“default”，即匿名插槽。
在向具名插槽提供内容时，可以在一个 元素上使用 slot 指令，并以 slot 的参数的形式提供其名称（当然也可以直接放在标签中，如
）：
<!-- A.vue -->
<template>
<div>
<p>我是A组件</p>
<B>
<template slot="header">
<p>我是header部分</p>
</template>
<p>我是main（默认插槽）部分</p>
<template slot="footer">
<p>我是footer部分</p>
</template>
</B>
</div>
</template>现在 元素中的所有内容都将会被传入相应的插槽。任何没有被包裹在带有slot 的中的内容都会被视为默认插槽的内容。
3.3 作用域插槽
3.3.1 使用
让父组件的插槽内容可以访问子组件中的data数据
子组件
<!-- B.vue -->
<template>
<div>
<p>我是B组件</p>
<!-- 绑定在插槽元素上的attribute为插槽prop -->
<slot :obj="obj"></slot>
</div>
</template>
<script>
export default {
name:'B',
data(){
return {
obj:{
firstName:'leo',
lastName:'lion'
}
}
}
}
</script>父组件
<template>
<div>
<p>我是A组件</p>
<B>
<template slot-scope="data">
{{data.obj.lastName}}
</template >
</B>
</div>
</template>在这个例子中，我们选择将包含所有插槽 prop 的对象命名为 data，但你也可以使用任意你喜欢的名字。
到此这篇关于Vue中插槽slot的使用示例详解的文章就介绍到这了,更多相关Vue插槽slot使用内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
这篇文章主要来和大家分享一些关于 Vue3中Hooks封装的技巧,希望能够为大家在 Vue 3 项目中更好地利用 Hooks 提供一些思路和实践经验2023-12-12
cross-env是跨平台设置和使用环境变量的脚本。这篇文章主要介绍了vue中cross-env的使用,需要的朋友可以参考下2019-09-09
这篇文章主要给大家介绍了关于使用vue进行Lodop打印的一些常用方法,需要进行打印功能,Lodop就是实现需求的插件,文中通过代码介绍的非常详细,需要的朋友可以参考下2023-07-07
这篇文章主要介绍了vue项目实现背景颜色以及下划线从左到右渐变动画效果,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2024-08-08
这篇文章主要为大家详细介绍了Vue中用JSON实现刷新界面不影响倒计时，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2020-10-10
下面小编就为大家分享一篇vue 组件 全局注册和局部注册的实现，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-02-02
这篇文章主要介绍了.netcore+vue 实现压缩文件下载功能,本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2020-09-09
下面小编就为大家分享一篇vue checkbox 全选 数据的绑定及获取和计算方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-02-02
v-for指令是在模板编译的代码生成阶段实现的，当遍历数组或对象时需要使用列表渲染指令v-for。本文主要为大家介绍了v-for指令的基本用法，希望对大家有所帮助2023-04-04
本篇文章主要给大家详细代码讲解了vue2.0 elementUI制作面包屑导航栏的过程，对此有兴趣的朋友可以学习下。2018-02-02
最新评论