vue 插槽的使用

最新推荐文章于 2024-07-26 13:02:41 发布

zxf_CN

最新推荐文章于 2024-07-26 13:02:41 发布

阅读量3.6k

点赞数 6

分类专栏： vue

本文链接：https://blog.csdn.net/zxf_CN/article/details/109388154

版权

本文介绍了Vue中组件插槽的使用，包括其作用和具名插槽的概念。组件插槽允许父组件的内容插入到子组件的特定位置，实现模板数据的传递。具名插槽则通过命名区分多个插槽，便于更灵活的布局设计。通过实例代码展示了如何在父组件中定义和使用具名插槽，以便在子组件中呈现不同的父组件内容。

摘要由CSDN通过智能技术生成

1. 组件插槽的作用

父组件向子组件传递内容：

不是之前的数据传递，是模板数据的传递

在这里插入图片描述

我们平常定义的组件模板，渲染到页面上是这样的：

比如：我们的组件模板为 a.vue 要渲染在 b.vue 上，就是这样的：

a.vue

<template>
    我是子组件，要渲染到 b.vue 身上的
</template>

a.vue 导入到 b.vue 上；

b.vue

<template>
    <!-- 子组件的占位符 -->
	<a组件></a组件>
</template>

<script>
import a组件 from './component/a.vue'
    
export default {
    
    components: {
    
        a组件
    }
}
</script>

在 b.vue 中的子组件占位符上写内容，在页面上是显示不了的，会被 a.vue 的内容覆盖掉；

b.vue:
<template>
    <!-- 在 b.vue 上显示不了 -->
    <a组件>我是文字</a组件>
</template>

使用组件的插槽功能，可以将父组件的元素填到子组件中使用 slot 标签来占位的地方；

a.vue：
<template>
    我是子组件，要渲染到 b.vue 身上的
    <!-- 相当一个占位符，可以接收 父组件 中写在 子组件标签中的 内容； -->
    <slot></slot>  
</template>

2. 具名插槽

定义：

有时我们需要多个插槽，为了区分多个插槽，我们可以给插槽起名字，这叫做 “具名插槽” 。

主要代码：

父

<template>
  <div>
     <子组件>
         <template v-slot:a> a </template>
         <template v-slot:b> b </template>
         <template v-slot:c> c </template>
     </子组件>
  </div>
</template>