Vue 插槽

目录

作用

分类

使用

---

作用

        让父组件能够在子组件指定位置中插入HTML结构。

分类

• 默认插槽
• 具名插槽
• 作用域插槽

使用

• 默认插槽：将父组件中的所有HTML 结构放入子组件中的默认插槽；

父组件中：
        <Category>
           <div>html结构1</div>
        </Category>

子组件中：
        <template>
            <div>
               <!-- 定义插槽 -->
               <slot>插槽默认内容...</slot>
            </div>
        </template>

• 具名插槽：对应名称插槽，放置时可以使用多个并且一 一与name对应；

父组件中：
        <Category>

            写法一：不带template 使用slot
            <div slot="center">
              <div>html结构1</div>
            </div>

            写法二：使用template 使用slot或者v-slot
            <template v-slot:"footer">
               <div>html结构</div>
            </template>
        </Category>
子组件中：
        <template>
            <div>
               <!-- 定义插槽 -->
               <slot name="center">插槽默认内容...</slot>
               <slot name="footer">插槽默认内容...</slot>
            </div>
        </template>

• 作用域插槽：必须使用template标签包裹，可以带名字。使用scope接收传递过来的对象，名字自定义。

父组件中：
         
		<Category>
			<template scope="scopeData">
                名称自定义  这里使用scopeData
				<!-- 生成的是ul列表 -->
				<ul>
					<li v-for="g in scopeData.games" :key="g">{{g}}</li>
				</ul>
                <h4> {{ scopeData.hello }}</h4>
			</template>
		</Category>
         
		<Category>
			<template slot-scope="scopeData">
				<!-- 生成的是h4标题 -->
				<h4 v-for="g in scopeData.games" :key="g">{{g}}</h4>
			</template>
		</Category>

子组件中：
        <template>
            <div>
                <slot :games="games" :msg="hello"></slot>
            </div>
        </template>
		
        <script>
            export default {
                name:'Category',
                props:['title'],
                //数据在子组件自身
                data() {
                    return {
                        games:['红色警戒','穿越火线','劲舞团','超级玛丽'],
                        hello:'你好'
                    }
                },
            }
        </script>