内置组件 -slot讲解

最新推荐文章于 2025-07-16 10:40:44 发布

barnett_y

最新推荐文章于 2025-07-16 10:40:44 发布

阅读量1.6k

点赞数

分类专栏：【Vue2.0-3.0点滴知识】

【Vue2.0-3.0点滴知识】专栏收录该内容

571 篇文章

订阅专栏

slot是标签的内容扩展，也就是说你用slot就可以在自定义组件时传递给组件内容，组件接收内容并输出。

转自http://jspang.com/2017/04/09/vue2_4/4/

先来定义一个<jspang></jspang>的组件，这个组件用来显示博主的一些信息。

我们在Vue 构造器里的data中给出了信息，信息如下：（博客地址，网名，使用技能）

1
2
3
4
5
6
7
data:{
    jspangData:{
        bolgUrl:'http://jspang.com',
        netName:'技术胖',
        skill:'Web前端'
    }
},

我们用<template></template>标签的方式定义了组件：

1

2

3

4

5

6

7

8

<template
id="tmp">

    <div>

        <p>博客地址：</p>

        <p>网名：</p>

        <p>技术类型：</p>

    </div>

</template>

我们现在就可以用slot功能让组件接收传递过来的值，并在模板中接收显示。

slot的使用需要两步：

1、在HTML的组件中用slot属性传递值。

1
2
3
4
5
<jspang>
    <span slot="bolgUrl">{{jspangData.bolgUrl}}</span>    
    <span slot="netName">{{jspangData.netName}}</span>    
    <span slot="skill">{{jspangData.skill}}</span>    
</jspang>

2、在组件模板中用<slot></slot>标签接收值。

1

2

3

4

5

6

7

8

<template
id="tmp">

    <div>

        <p>博客地址：<slot
name="bolgUrl"></slot></p>

        <p>网名：<slot
name="netName"></slot></p>

        <p>技术类型：<slot
name="skill"></slot></p>

    </div>

</template>

我们贴出这个案例的全部代码：

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

<!DOCTYPE html>

<html
lang="en">

<head>

    <meta
charset="UTF-8">

    <script
type="text/javascript"
src="../assets/js/vue.js"></script>

    <title>Slot
 content extend Demo</title>

</head>

<body>

    <h1>Slot
 content extend Demo</h1>

    <hr>

    <div
id="app">

    <jspang>

        <span
slot="bolgUrl">{{jspangData.bolgUrl}}</span>    

        <span
slot="netName">{{jspangData.netName}}</span>    

        <span
slot="skill">{{jspangData.skill}}</span>    

    </jspang>

    </div>

<template
id="tmp">

    <div>

        <p>博客地址：<slot
name="bolgUrl"></slot></p>

        <p>网名：<slot
name="netName"></slot></p>

        <p>技术类型：<slot
name="skill"></slot></p>

    </div>

</template>

    <script
type="text/javascript">

        var
jspang={

            template:'#tmp'

        }

        var
app=new
Vue({

            el:'#app',

            data:{

jspangData:{

bolgUrl:'http://jspang.com',

netName:'技术胖',

skill:'Web前端'

}

            },

            components:{

                "jspang":jspang

            }

        })

    </script>

</body>

</html>