1.插槽
在2.6.0中,我们为具名插槽和作用域插槽引入了一个新的统一的语法(即v-slot指令)。它取代了slot和slot-scope,slot和slot-scope目前已经被废弃但未被移除且仍在文档中的attribute。
1.作用:让父组件可以向子组件指定位置插入html结构,也是组件间的一种通信的方式,适用于父组件 ===> 子组件
2.分类:默认插槽、具名插槽、作用域插槽
3.使用方式如下
(1)默认插槽:
父组件中:
<Category>
<div>html结构1</div>
</Category>
子组件Category中:
<template>
<div>
<!-- 定义插槽 -->
<slot>插槽的默认内容...</slot>
</div>
</template>
(2)具名插槽
父组件中:
<Category>
<template slot="center">
<div>html结构1</div>
</template>
<template>
<div>html结构2</div></template>
</Category>
子组件Category中
<template>
<div>
<!-- 定义插槽 -->
<slot name="center">插槽默认内容...</slot>
<slot name="footer">插槽默认内容...</slot>
</div>
</template>
(3)作用域插槽:
1. 理解:<span style="color:red">数据在组件的自身,但根据数据生成的结构需要组件
的使用者来决定。</span>(games数据在Category组件中,但使用数据所遍历出来的
结构由App组件决定)
2. 具体编码:
```vue
父组件中:
<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>
子组件中:
<template>
<div>
<slot :games="games"></slot>
</div>
</template>
<script>
export default {
name:'Category',
props:['title'],
//数据在子组件自身
data() {
return {
games:['红色警戒','穿越火线','劲舞团','超级玛丽']
}
},
}
</script>