Vue的slot插槽(默认插槽、具名插槽、作用域插槽)

1. slot插槽

作用：让父组件可以向子组件指定位置插入html布局，也是一种组件间通讯的方式，实用于父组件向子组件通报数据
1.1 默认插槽

Category.vue：

  

• 界说一个插槽。等着组件的利用者举行添补  
  
• 可以在子组件Category.vue给插入的html布局界说CSS样式，也可以在父组件App.vue给插入的html布局界说CSS样式
  

1. <template>
2.         <div class="category">
3.                 <h3>{
4.   
5.   {title}}分类</h3>
6.                 <slot>我是一些默认值，当使用者没有传递具体结构时，我会出现</slot>
7.         </div>
8. </template>
10. <script>
11.         export default {
12.                 name:'Category',
13.                 props:['title']
14.         }
15. </script>
17. <style scoped>
18.         .category{
19.                 background-color: skyblue;
20.                 width: 200px;
21.                 height: 200px;
22.         }
23.         h3{
24.                 text-align: center;
25.                 background-color: orange;
26.         }
27.         video{
28.                 width: 100%;
29.         }
30.         img{
31.                 width: 100%;
32.         }
33. </style>

复制代码

App.vue：直接在利用子组件的标签中，插入html布局，同时可以通报数据到html。假如子组件不界说slot插槽，则插入的html布局生存在子组件的$slots上

1. <template>
2.         <div class="container">
3.                 <Category title="风景" >
4.                         <img src="https://t7.baidu.com/it/u=2604797219,1573897854&fm=193&f=GIF" alt="">
5.                 </Category>
7.                 <Category title="游戏" >
8.                         <ul>
9.                                 <li v-for="(game,index) in games" :key="index">{
10.   
11.   {game}}</li>
12.                         </ul>
13.                 </Category>
15.                 <Category title="电影">
16.                         <video controls s

复制代码