Vue(十一)默认插槽、具名插槽、作用域插槽

一、需求

有三个Category组件，展示不同的内容。
需求：美食模块需要展示图片，游戏模块还是文字，电影模块展示预告片。

<!--App组件-->
<template><div class="container"><Category :listData="foods" title="美食"> </Category><Category :listData="games" title="游戏"> </Category><Category :listData="films" title="电影"> </Category></div>
</template>
<script>data () {return {foods: ['火锅', '烧烤', '小龙虾'],games: ['超级玛丽', '魂斗罗'],films: ['寻梦环游记', '小黄人大眼萌']}}
</script>

<!--Category组件-->
<template><div class="content"><h3 class="title">{{ title }}</h3><ul><li v-for="(item, index) in listData" :key="index">{{ item }}</li></ul></div>
</template>
<script>props: ['listData', 'title']
</script>

二、插槽

作用：让父组件可以向子组件指定位置插入html结构，也是一种组件间通信的方式。

1. 默认插槽

<!--父组件中：--><Category><div>html结构1</div></Category>
<!--子组件中：--><template><div><!-- 定义插槽,相当于在这里挖了个坑，等待组件的使用者来填充 --><slot>插槽默认内容...</slot></div></template>

插槽里的这些样式放在App里也行，放在Category里也行。

2. 具名插槽

当子组件中包含多个插槽时，需要给每个插槽起名字
起名字：指定name属性
使用具名插槽：

• slot = '插槽名'
• 如果使用了template, 还可以v-slot:footer来指定使用哪个插槽(这种方式只有template可以这样写)

子组件：

<!--Category组件-->
<template><div class="content"><h3 class="title">{{ title }}</h3><slot name="center"></slot><slot name="footer"></slot></div>
</template>

父组件：

<!--App.vue组件--><div class="container"><Category title="美食"><img slot="center" src="../public/food.jpg" alt="" /><div slot="footer" class="foot"><a href="">更多美食</a><a href="">更多美食</a></div></Category><Category title="游戏"><ul slot="center"><li v-for="(g, index) in games" :key="index">{{ g }}</li></ul><a href="#" slot="footer">单机游戏</a></Category><Category title="电影"><video src="https://vjs.zencdn.net/v/oceans.mp4"></video><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></template></Category></div>

如果插槽不指定名称，使用的时候就会出现多个同样的内容

3. 作用域插槽

子组件通过插槽给父组件传值，必须要写template来接收传过来的值。

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

子组件Category

<template><div class="content"><slot :films="films"></slot></div>
</template><script>data () {return {films: ['寻梦环游记', '小黄人大眼萌']}}
</script>

父组件App.vue

  <div class="container"><Category><!-- template必须要写 --><template scope="scopeData"><!--查看scopeData具体是什么-->{{scopeData}}<ul><li v-for="(item, index) in scopeData.films" :key="index"> {{ item }}</li></ul></template></Category></div>

1、 scopeData具体内容是什么？
是一个对象

2、获取scope数据的简单方式，解构赋值

 <template scope="{films}"><ul><li v-for="(item, index) in films" :key="index"> {{ item }}</li></ul></template>

3、获取数据还有一种方式

语法：slot-scope="{films}

 <template slot-scope="{films}">...</template>

用哪种方式都行，是新旧api的原因。slot-scope是新api获取数据的方式，scope是旧api获取数据的方式