Vue中插槽slot的使用示例详解

更新时间：2025年05月13日 11:56:16 作者：编程的一拳超人

这篇文章主要介绍了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使用内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

Vue 中 Promise 的then方法异步使用及async/await 异步使用总结
then 方法是 Promise 中处理的是异步调用，异步调用是非阻塞式的，在调用的时候并不知道它什么时候结束，也就不会等到他返回一个有效数据之后再进行下一步处理，这篇文章主要介绍了Vue 中 Promise 的then方法异步使用及async/await 异步使用总结,需要的朋友可以参考下
2023-01-01
优化Vue中date format的性能详解
这篇文章主要介绍了优化Vue中date format的性能详解，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2020-01-01
Vue+Springboot实现接口签名的示例代码
这篇文章主要介绍了Vue+Springboot实现接口签名的示例代码，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2021-04-04
Vue3响应式高阶用法之shallowReadonly()使用
在前端开发中,Vue3的shallowReadonly() API允许开发者创建部分只读的状态,这对于保持顶层属性不变而内部属性可变的场景非常有用,本文将详细介绍 shallowReadonly() 的使用方法及其应用场景,具有一定的参考价值,感兴趣的可以了解一下
2024-09-09
vue中使用@change的方法
@change 是 Vue.js 中用于监听表单元素值变化的事件处理器,很多组件有@change事件,那到底如何获取到当前的参数呢？本文给大家详细讲解,感兴趣的朋友一起看看吧
2023-11-11
基于vue+axios+lrz.js微信端图片压缩上传方法
这篇文章主要介绍了基于vue+axios+lrz.js微信端图片压缩上传方法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2019-06-06
Vite使用unplugin-auto-import实现vue3中的自动导入
本文主要介绍了Vite使用unplugin-auto-import实现vue3中的自动导入,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
2024-06-06
Vue获取页面元素的相对位置的方法示例
这篇文章主要介绍了Vue获取页面元素的相对位置的方法示例，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2020-02-02
ElementUI表单验证validate和validateField的使用及区别
Element-UI作为前端框架,最常使用到的就是表单验证,下面这篇文章主要给大家介绍了关于ElementUI表单验证validate和validateField的使用及区别,文中通过实例代码介绍的非常详细,需要的朋友可以参考下
2023-02-02
Vue打包为相对路径的具体实现方法
在Vue.js项目中,构建后的资源文件（如CSS、JavaScript文件、图片等）通常会被放置在指定的目录下,为了确保这些文件能够被正确加载,Vue CLI 提供了配置选项来指定这些文件的路径,本文给大家介绍了Vue打包为相对路径的具体实现方法,需要的朋友可以参考下
2024-09-09