Vue 插槽(slot)使用

1 为什么使用slot

组件的插槽

• 组件的插槽是为了让我们封装的组件更加具有扩展性。

• 让使用者可以决定组件内部一些内容到底展示了什么。

举例：

• 移动开发中，几乎每个页面都有导航栏

• 导航栏我们会分装成一个插件，比如nav-bar组件

• 一旦有了这个组件，我们就可以在多个页面中复用了

<div id="app">
    <cpn><button>按钮button>cpn>
    <cpn>cpn>
    <cpn><span>标签span>cpn>
div>

<template id="cpn">
    <div>
        <h2>我是组件h2>
        <p>666p>
        <slot><button>默认为按钮button>slot>
    div>
template>

<script src="../js/vue.js">script>
<script>
  const app = new Vue({
    el: '#app',
    data: {
      message: "你好，有勇气的牛排"
    },
    components: {
      cpn: {
        template: '#cpn'
      }
    }
  })
script>
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

2 具名插槽使用（导航）

<div id="app">
    <cpn><span slot="center">标题span>cpn>
    <cpn><button slot="center">标题button>cpn>
div>

<template id="cpn">
    <div>
        <slot name="left"><span>左边span>slot>
        <slot name="center"><span>中间span>slot>
        <slot name="right"><span>右边span>slot>
    div>
template>

<script src="../js/vue.js">script>
<script>
  const app = new Vue({
    el: '#app',
    data: {
      message: "你好，有勇气的牛排"
    },
    components: {
      cpn: {
        template: '#cpn'
      }
    }
  })
script>
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

3 作用域插槽

• 父组件替换插槽的标签，但是内容由子组件来提供

<div id="app">
    <cpn>cpn>

    <cpn>
        
        <template v-slot="slot">
            <span v-for="item in slot.data">{{ item }} * span>
        template>
    cpn>

    <cpn>
        
        
        <template v-slot="slot">
            <span>{{ slot.data.join(' * ') }}span>
        template>
    cpn>

div>

<template id="cpn">
    <div>
        <slot :data="pLanguages">
            <ul>
                <li v-for="item in pLanguages">{{ item }}li>
            ul>
        slot>
    div>
template>

<script src="../js/vue.js">script>
<script>
  const app = new Vue({
    el: '#app',
    data: {
      message: "你好，有勇气的牛排"
    },
    components: {
      cpn: {
        template: '#cpn',
        data() {
          return {
            pLanguages: ['JavaScript', 'C++', 'Java', 'C#', 'Python']
          }
        }
      }
    }
  })
script>
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

仓库地址：## 1 为什么使用slot

组件的插槽

• 组件的插槽是为了让我们封装的组件更加具有扩展性。

• 让使用者可以决定组件内部一些内容到底展示了什么。

举例：

• 移动开发中，几乎每个页面都有导航栏

• 导航栏我们会分装成一个插件，比如nav-bar组件

• 一旦有了这个组件，我们就可以在多个页面中复用了

<div id="app">
    <cpn><button>按钮button>cpn>
    <cpn>cpn>
    <cpn><span>标签span>cpn>
div>

<template id="cpn">
    <div>
        <h2>我是组件h2>
        <p>666p>
        <slot><button>默认为按钮button>slot>
    div>
template>

<script src="../js/vue.js">script>
<script>
  const app = new Vue({
    el: '#app',
    data: {
      message: "你好，有勇气的牛排"
    },
    components: {
      cpn: {
        template: '#cpn'
      }
    }
  })
script>
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

2 具名插槽使用（导航）

<div id="app">
    <cpn><span slot="center">标题span>cpn>
    <cpn><button slot="center">标题button>cpn>
div>

<template id="cpn">
    <div>
        <slot name="left"><span>左边span>slot>
        <slot name="center"><span>中间span>slot>
        <slot name="right"><span>右边span>slot>
    div>
template>

<script src="../js/vue.js">script>
<script>
  const app = new Vue({
    el: '#app',
    data: {
      message: "你好，有勇气的牛排"
    },
    components: {
      cpn: {
        template: '#cpn'
      }
    }
  })
script>
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

3 作用域插槽

• 父组件替换插槽的标签，但是内容由子组件来提供

<div id="app">
    <cpn>cpn>

    <cpn>
        
        <template v-slot="slot">
            <span v-for="item in slot.data">{{ item }} * span>
        template>
    cpn>

    <cpn>
        
        
        <template v-slot="slot">
            <span>{{ slot.data.join(' * ') }}span>
        template>
    cpn>

div>

<template id="cpn">
    <div>
        <slot :data="pLanguages">
            <ul>
                <li v-for="item in pLanguages">{{ item }}li>
            ul>
        slot>
    div>
template>

<script src="../js/vue.js">script>
<script>
  const app = new Vue({
    el: '#app',
    data: {
      message: "你好，有勇气的牛排"
    },
    components: {
      cpn: {
        template: '#cpn',
        data() {
          return {
            pLanguages: ['JavaScript', 'C++', 'Java', 'C#', 'Python']
          }
        }
      }
    }
  })
script>
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

gitee:

https://github.com/courageSteak/vue-framework