前端vue学习笔记——插槽_前端插槽-优快云博客

本文链接：https://blog.youkuaiyun.com/weixin_49313319/article/details/133267715

本文详细介绍了Vue.js中的插槽机制，包括默认插槽、具名插槽以及作用域插槽的用法，展示了如何在父组件与子组件间进行灵活的内容传递和布局控制。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

插槽

作用：让父组件可以向子组件指定位置插入html结构，也是一种组件间通信的方式，适用于父组件 =>子组件
分类：默认插槽、具名插槽、作用域插槽
使用方式：

（1）默认插槽

父组件中：
	<Category>
		<div>html结构</div>
	</Category>
子组件中：
<template>
  <div>
    <!-- 定义一个插槽（挖个坑，等着组件的使用者填充） -->
    <slot>我是默认的一些内容</slot>
  </div>
</template>

(2)具名插槽

父组件中：
	<Category slot="center”>
		<div>html结构</div>
	</Category>
	<Category slot="footer”>
		<div>html结构</div>
	</Category>
子组件中：
<template>
  <div>
    <!-- 定义一个插槽（挖个坑，等着组件的使用者填充） -->
    <slot name="center>我是默认的一些内容</slot>
    <slot name="footer>我是默认的一些内容</slot>
  </div>
</template>

（3）作用域插槽

理解：数据在组件的自身，但根据数据生成的结构需要组件的使用者来决定。（games数据在Category组件中，但使用数据所遍历出来的结构由App组件决定）
具体编码：

   父组件中：
        <Category>
           <template scope="scopeData">
            <!-- 生成的是ul列表 -->
            <ul>
                <li v-for="(g,index) in scopeData.games" :key="index">{{g}}</li>
            </ul>
           </template>
         </Category>

         <Category>
            <template slot-scope="scopeData">
             <!-- 生成的是h4标题 -->
            <ul>
                <h4 v-for="(g,index) in scopeData.games" :key="index">{{g}}</h4>
            </ul>
           </template>
         </Category>

    
 子组件中：
 <template>
  <div>
    <slot :games="games">我是默认的一些内容</slot>
  </div>
</template>

<script>
export default {
    name:'Category',
    data() {
      return {
        games:['红色警戒','穿越火线','劲舞团','超级玛丽'],
      }
    },
    props:['title']
}
</script>