Vue2.0 [quatrième trimestre] L'article 4 intégré dans les composants -Slot expliquer

Section 4 intégré dans les composants -Slot expliquer

slot d'extension de l'étiquette est contenu, c'est-à-dire: vous pouvez passer avec une fente dans le composant personnalisé au contenu des composants, le composant contenu reçoit et sorties.

La définition d' un premier <da0sy></da0sy>composant, ce composant est utilisé pour afficher des blogueurs d'information.

Nous constructeur Vue dans les données indiquées dans les informations, les informations sont les suivantes :( adresse de blog, nom d'écran, en utilisant des compétences)

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

Nous utilisons les <template></template>étiquettes définissent les composants:

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

Nous pouvons maintenant utiliser la fonction de fente permet au composant de recevoir l'affichage valeur passée, et la réception dans le modèle.

fente utilisation nécessite deux étapes:

1, utilisé fente valeur d'attribut HTML de l'ensemble de transfert.

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

2, la valeur d'étiquette reçue par l'ensemble matrice.

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

Nous mettons tout le code dans ce cas:

<!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>

effet du navigateur: