小于博客
小于博客
2022-08-17
目录

插槽

# 笔记

这里先将总结笔记罗列。

  1. 作用：让父组件可以向子组件指定位置插入 html 结构，也是一种组件间通信的方式，适用于 父组件 ===> 子组件 .
  2. 分类：默认插槽、具名插槽、作用域插槽。
  3. 使用方式
  4. 默认插槽
  ```vue
  父组件中：
          <Category>
             <div>html结构1</div>
          </Category>
  子组件中：
          <template>
              <div>
                 <!-- 定义插槽 -->
                 <slot>插槽默认内容...</slot>
              </div>
          </template>
  ```
  1. 具名插槽：
  ```vue
  父组件中：
          <Category>
              <template slot="center">
                <div>html结构1</div>
              </template>
  
              <template v-slot:footer>
                 <div>html结构2</div>
              </template>
          </Category>
  子组件中：
          <template>
              <div>
                 <!-- 定义插槽 -->
                 <slot name="center">插槽默认内容...</slot>
                 <slot name="footer">插槽默认内容...</slot>
              </div>
          </template>
  ```
  1. 作用域插槽：
  2. 理解：数据在组件的自身，但根据数据生成的结构需要组件的使用者来决定。（games 数据在 Category 组件中，但使用数据所遍历出来的结构由 App 组件决定）
  3. 具体编码：
     ```vue
     父组件中：
             <Category>
                 <template scope="scopeData">
                     <!-- 生成的是ul列表 -->
                     <ul>
                         <li v-for="g in scopeData.games" :key="g"></li>
                     </ul>
                 </template>
             </Category>
     
             <Category>
                 <template slot-scope="scopeData">
                     <!-- 生成的是h4标题 -->
                     <h4 v-for="g in scopeData.games" :key="g"></h4>
                 </template>
             </Category>
     子组件中：
             <template>
                 <div>
                     <slot :games="games"></slot>
                 </div>
             </template>
     
             <script>
                 export default {
                     name:'Category',
                     props:['title'],
                     //数据在子组件自身
                     data() {
                         return {
                             games:['红色警戒','穿越火线','劲舞团','超级玛丽']
                         }
                     },
                 }
             </script>
     ```

# 代码

# 默认插槽

# 代码路径

$ tree -N
.
├── App.vue
├── components
│   └── Category.vue
└── main.js
1
2
3
4
5
6

# App.vue

<template>
  <div class="container">
    <Category :title="美食">
            <img src="https://s3.ax1x.com/2021/01/16/srJlq0.jpg" alt="">
    </Category>

    <Category :title="游戏">
      <ul>
        <li v-for="(g,index) in games" :key="index">{{g}}</li>
      </ul>
    </Category>

    <Category :title="电影">
            <video controls src="http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4"></video>
    </Category>
  </div>
</template>

<script>
  import Category from './components/Category.vue'
  export default {
    name:'App',
    components:{Category},
    data() {
            return {
                foods:['火锅','烧烤','小龙虾','牛排'],
                games:['红色警戒','穿越火线','劲舞团','超级玛丽'],
                films:['《教父》','《拆弹专家》','《你好，李焕英》','《尚硅谷》']
            }
        },
  }
</script>

<style>
.container{
        display: flex;
        justify-content: space-around;
}
</style>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39

# Category.vue

<template>
    <div class="category">
        <h3>{{title}}分类</h3>
        <!-- 定义一个插槽 -->
        <slot>我是默认值，当使用者没有传递具体结构时，我会出现</slot>
    </div>
</template>

<script>
    export default {
        name:'Category',
        props:['title']
    }
</script>

<style>
    .category{
        background-color: skyblue;
        width: 200px;
        height: 300px;
    }
    h3{
        text-align: center;
        background-color: orange;
    }
    video{
        width: 100%;
    }
    img{
        width: 100%;
    }
</style>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32

# main.js

import Vue from "vue"
import App from './App.vue'

Vue.config.productionTip = false

new Vue({
    el: '#app',
    components:{App},
    render: h => h(App),
    beforeCreate() {
        Vue.prototype.$bus = this
    },
});
1
2
3
4
5
6
7
8
9
10
11
12
13

# 具名插槽

# 代码路径

$ tree -N
.
├── App.vue
├── components
│   └── Category.vue
└── main.js
1
2
3
4
5
6

# App.vue

<template>
  <div class="container">
    <Category :title="美食">
            <img slot="center" src="https://s3.ax1x.com/2021/01/16/srJlq0.jpg" alt="">
      <a slot="footer" href="http://fsvip.gitee.io/hexo-theme-fluid/">美食分类</a>
    </Category>

    <Category :title="游戏">
      <ul slot="center">
        <li v-for="(g,index) in games" :key="index">{{g}}</li>
      </ul>
      <div class="game" slot="footer">
        <a href="http://fsvip.gitee.io/hexo-theme-fluid/">单机游戏</a>
        <a href="http://fsvip.gitee.io/hexo-theme-fluid/">网络游戏</a>
      </div>
    </Category>

    <Category :title="电影">
            <video slot="center" controls src="http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4"></video>
      <template v-slot:footer>
        <div class="game">
          <a href="http://fsvip.gitee.io/hexo-theme-fluid/">经典</a>
          <a href="http://fsvip.gitee.io/hexo-theme-fluid/">热门</a>
          <a href="http://fsvip.gitee.io/hexo-theme-fluid/">推荐</a>
        </div>
        <h4>欢迎前来观影</h4>
      </template>
    </Category>
  </div>
</template>

<script>
  import Category from './components/Category.vue'
  export default {
    name:'App',
    components:{Category},
    data() {
            return {
                foods:['火锅','烧烤','小龙虾','牛排'],
                games:['红色警戒','穿越火线','劲舞团','超级玛丽'],
                films:['《教父》','《拆弹专家》','《你好，李焕英》','《尚硅谷》']
            }
        },
  }
</script>

<style>
.container,.game,h4{
        display: flex;
        justify-content: space-around;
}
/* h4{
  text-align: center;
} */
</style>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55

# Category.vue

<template>
    <div class="category">
        <h3>{{title}}分类</h3>
        <!-- 定义一个插槽 -->
        <slot name="center">我是默认值，当使用者没有传递具体结构时，我会出现1</slot>
        <slot name="footer">我是默认值，当使用者没有传递具体结构时，我会出现2</slot>
    </div>
</template>

<script>
    export default {
        name:'Category',
        props:['title']
    }
</script>

<style>
    .category{
        background-color: skyblue;
        width: 200px;
        height: 300px;
    }
    h3{
        text-align: center;
        background-color: orange;
    }
    video{
        width: 100%;
    }
    img{
        width: 100%;
    }
</style>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33

# main.js

import Vue from "vue"
import App from './App.vue'

Vue.config.productionTip = false

new Vue({
    el: '#app',
    components:{App},
    render: h => h(App),
    beforeCreate() {
        Vue.prototype.$bus = this
    },
});
1
2
3
4
5
6
7
8
9
10
11
12
13

# 作用域插槽

# 代码路径

$ tree -N
.
├── App.vue
├── components
│   └── Category.vue
└── main.js
1
2
3
4
5
6

# App.vue

<template>
  <div class="container">

    <Category :title="游戏">
      <template slot-scope="eryajf">
        <ul>
          <li v-for="(g,index) in eryajf.games" :key="index">{{g}}</li>
        </ul>
      </template>
    </Category>

    <Category :title="游戏">
      <template slot-scope="{games}">
        <ol>
          <li  style="color:red" v-for="(g,index) in games" :key="index">{{g}}</li>
        </ol>
      </template>
    </Category>

    <Category :title="游戏">
      <template slot-scope="{games}">
        <ol>
          <h4 v-for="(g,index) in games" :key="index">{{g}}</h4>
        </ol>
      </template>
    </Category>

  </div>
</template>

<script>
  import Category from './components/Category.vue'
  export default {
    name:'App',
    components:{Category},
  }
</script>

<style>
.container,.game,h4{
        display: flex;
        justify-content: space-around;
}
</style>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44

# Category.vue

<template>
    <div class="category">
        <h3>{{title}}分类</h3>
        <!-- 定义一个插槽 -->
        <slot :games="games">我是默认值，当使用者没有传递具体结构时，我会出现1</slot>
    </div>
</template>

<script>
    export default {
        name:'Category',
        props:['title'],
        data() {
            return {
                games:['红色警戒','穿越火线','劲舞团','超级玛丽'],
            }
        },
    }
</script>

<style>
    .category{
        background-color: skyblue;
        width: 200px;
        height: 300px;
    }
    h3{
        text-align: center;
        background-color: orange;
    }
    video{
        width: 100%;
    }
    img{
        width: 100%;
    }
</style>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37

# main.js

import Vue from "vue"
import App from './App.vue'

Vue.config.productionTip = false

new Vue({
    el: '#app',
    components:{App},
    render: h => h(App),
    beforeCreate() {
        Vue.prototype.$bus = this
    },
});
1
2
3
4
5
6
7
8
9
10
11
12
13
上次更新: 2024/02/28, 13:00:35

← src_求和案例_纯Vue版本→

最近更新
01
SpringBoot 快速实现 api 加密！
03-21
02
SpringBoot整合SQLite
03-07
03
SpringBoot配置使用H2数据库的简单教程
02-21
更多文章>
Theme by Vdoing | Copyright © 2017-2024 | 点击查看十年之约 | 豫ICP备2022014539号