Vue2.0 [the fourth quarter] Section 4 built-in components -slot explain

Section 4 built-in components -slot explain

label expansion slot is content, that is to say: you can pass with a slot in the custom component to component content, content component receives and outputs.

Defining a first <da0sy></da0sy>component, this component is used to display some information bloggers.

We Vue constructor in the data given in the information, the information is as follows :( blog address, screen name, using skills)

data:{
    da0syData:{
        bolgUrl:'https://www.cnblogs.com/Elva3zora/',
        netName:'da0sy',
        skill:'Web前端'
    }
},

We use <template></template>labels define the components:

<template id="tmp">
    <div>
        <p>博客地址：</p>
        <p>网名：</p>
        <p>技术类型：</p>
    </div>
</template>

We can now use slot feature allows the component to receive the passed value, and receiving display in the template.

Use slot requires two steps:

1, slot used HTML attribute value of the transfer assembly.

<da0sy>
    <span slot="blogUrl">{{da0syData.blogUrl}}</span>  //传递
    <span slot="netName">{{da0syData.netName}}</span>
    <span slot="skill">{{da0syData.skill}}</span>
</da0sy>

2, the tag value received by the template assembly.

<template id="tep">
    <div>
        <p>博客地址：<slot name="blogUrl"></slot></p>  //接收
        <p>网名：<slot name="netName"></slot></p>
        <p>技术类型：<slot name="skill"></slot></p>
    </div>
</template>

We put all the code in this case:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Slot content extend Demo</title>
    <script type="text/javascript" src="../assets/js/vue.js"></script>
</head>
    <body>
        <h1>Slot content extend Demo</h1>
        <hr>
        <div id="app">
            <da0sy>
                <span slot="blogUrl">{{da0syData.blogUrl}}</span>  //传递
                <span slot="netName">{{da0syData.netName}}</span>
                <span slot="skill">{{da0syData.skill}}</span>
            </da0sy>
        </div>

        <template id="tep">
            <div>
                <p>博客地址：<slot name="blogUrl"></slot></p>  
                <p>网名：<slot name="netName"></slot></p>
                <p>技术类型：<slot name="skill"></slot></p>
            </div>
        </template>

        <script type="text/javascript">
            var da0sy = {
                template:"#tep"
            }

            var app = new Vue({
                el:'#app',
                data:{
                    da0syData:{
                        blogUrl:'https://www.cnblogs.com/Elva3zora/',
                        netName:'Cardiac_Dejavu',
                        skill:"web前端"
                    }
                },
                components:{
                    "da0sy":da0sy
                }
            })
        </script>
    </body>
</html>

Browser effect: