Vue 插槽

 1 # 插槽
 2     1.作用：让父组件可以向子组件指定位置插入html结构，也是一种组件间通信的放肆，适用于 父组件===>子组件
 3     2.分类：默认插槽、具名插槽、作用域插槽
 4     3.使用方式：
 5         a.默认插槽
 6             父组件中：
 7                 <Category><div>html结构1div>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>