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>
标签：...,Vue,插槽,html,该处,组件,结构 来源： https://www.cnblogs.com/watermeloncode/p/16393092.html
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。