vue九插槽

---

插槽slot

作用：让父组件可以向子组件指定位置插入html结构，也是一种组件间通信的方式，适用于 父组件 ===> 子组件
父组件里面写子组件的标签 里面包裹别的元素
子组件里面写slot 来决定插在哪
分类：默认插槽、具名插槽、作用域插槽

template v-slot slot-scope都用于父组件

默认插槽

父组件中：

<Category>
   <div>html结构1</div>
</Category>

在子组件里嵌套元素的时候 不知道嵌套的元素在子组件放在哪
用插槽来决定
如果没有东西 显示插槽的里面的结构
如果有东西 显示那个东西
样式写在父和子都可以

子组件中：

<template>
    <div>
       <!-- 定义插槽 -->
       <slot>插槽默认内容...</slot>
    </div>
</template>

2. 具名插槽

父组件中：
一个子组件里要放两个不一样的 所以需要两个插槽 具有名字

1. 有两个结构要放在一个插槽 可以用template来包裹
2. 这时就可以用v-slot:footer(注意不是等号是引号)

<template slot="center">
      <div>html结构1</div>
    </template>
    

---

<template v-slot:footer>
				<div class="foot">
					<a href="http://www.atguigu.com">经典</a>
					<a href="http://www.atguigu.com">热门</a>
					<a href="http://www.atguigu.com">推荐</a>
				</div>
				<h4>欢迎前来观影</h4>
</template>

子组件中：

<template>
    <div>
       <!-- 定义插槽 -->
       <slot name="center">插槽默认内容...</slot>
       <slot name="footer">插槽默认内容...</slot>
    </div>
</template>

作用域插槽

也可以用来实现 子传父

• 在父组件里有子的标签 里面要展示子的数据 但是数据在子组件那里

• 可以通过插槽来slot name:"name"来传递数据 给用这个slot的父组件传递

• 父组件里 必须用template包裹 要传的东西 并用slot-scope=‘这是一个对象因为子组件可以传多个数据’ 来接受 不用写其他的 直接使用

• v-slot和slot-scope不能一起用 但是可以v-slot:haha=“name”

父组件:

<Category>
	<template scope="scopeData">
		<!-- 生成的是ul列表 -->
		<ul>
			<li v-for="g in scopeData.games" :key="g">{{g}}</li>
		</ul>
	</template>
</Category>

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

子组件

<div>
        <slot :games="games"></slot>
    </div>

也可以用解构赋值
父组件接受时slot-scope=“{games}”