1 # 插槽
2 1.作用：让父组件可以向子组件指定位置插入html结构，也是一种组件间通信的放肆，适用于 父组件===>子组件
3 2.分类：默认插槽、具名插槽、作用域插槽
4 3.使用方式：
5 a.默认插槽
6 父组件中：
7 <Category><div>html结构1</div></Category>
8 子组件中：
9 <template><div><slot>插槽内容(该处内容将会由父组件中的html结构覆盖)...</slot></div><template>
10 b.具名插槽：
11 父组件中：
12 <Category>
13 <template slot="center"><div>html结构1(该处结构替换子组件中插槽名为“center”的插槽)</div><template>
14 <template v-slot=footer><div>html结构2(该处结构替换子组件中插槽名为“footer”的插槽)</div><template>
15 </Category>
16 子组件中：
17 <template><div>
18 <slot name="center">插槽内容(该处内容将会由父组件中的html结构覆盖)...</slot>
19 <slot name="footer">插槽内容(该处内容将会由父组件中的html结构覆盖)...</slot>
20 </div><template>
21 c.作用域插槽：
22 理解：数据在组件的自身，但根据数据生成的结构需要组件的使用者来决定。
23 父组件中：
24 <Category title="美食">
25 <template scope="categoryObj">
26 <ul>
27 <li v-for="(data, index) in categoryObj.foods" :key="index">{{data}}</li>
28 </ul>
29 <img slot="foot" src="https://s3.ax1x.com/2021/01/16/srJlq0.jpg" alt="">
30 </template>
31
32 </Category>
33 <Category title="美食">
34 <template scope="{foods,msg}">
35 <ul>
36 <li style="color:red" v-for="(data, index) in foods" :key="index">{{data}}</li>
37 </ul>
38 <img slot="foot" src="https://s3.ax1x.com/2021/01/16/srJlq0.jpg" alt="">
39 <h1>{{msg}}</h1>
40 </template>
41 </Category>
42 子组件中：
43 <template>
44 <div class="category">
45 <h3>{{title}}</h3>
46 <slot :foods="foods" msg="test">这是default插槽</slot>
47 </div>
48
49 </template>
50 <script>
51 export default {
52 name: 'Category',
53 props:['title'],
54 data(){
55 return {
56 foods:['火锅','烧烤','小龙虾','牛排'],
57 }
58 }
59 }
60 </script>
