Vue - 内置组件 -slot 父组件向子组件传值

slot是标签的内容扩展，也就是说你用slot就可以在自定义组件时传递给组件内容，组件接收内容并输出。先来定义一个<jspang></jspang>的组件，这个组件用来显示博主的一些信息。我们在Vue 构造器里的data中给出了信息，信息如下：（博客地址，网名，使用技能）1234567data:{ jspangData:{

xiaohanzhu000

6197人浏览 · 2018-07-03 13:57:43

xiaohanzhu000 · 2018-07-03 13:57:43 发布

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

先来定义一个<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>