插槽slot
作用:让父组件可以向子组件指定位置插入html结构,也是一种组件间通信的方式,适用于 父组件 ===> 子组件
父组件里面写子组件的标签 里面包裹别的元素
子组件里面写slot 来决定插在哪
分类:默认插槽、具名插槽、作用域插槽
template v-slot slot-scope都用于父组件
默认插槽
父组件中:
<Category>
<div>html结构1</div>
</Category>
在子组件里嵌套元素的时候 不知道嵌套的元素在子组件放在哪
用插槽来决定
如果没有东西 显示插槽的里面的结构
如果有东西 显示那个东西
样式写在父和子都可以
子组件中:
<template>
<div>
<!-- 定义插槽 -->
<slot>插槽默认内容...</slot>
</div>
</template>
2. 具名插槽
父组件中:
一个子组件里要放两个不一样的 所以需要两个插槽 具有名字
- 有两个结构要放在一个插槽 可以用template来包裹
- 这时就可以用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}”