【vue】内置组件 -slot讲解

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

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

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

data:{
    jspangData:{
        bolgUrl:'http://jspang.com',
        netName:'技术胖',
        skill:'Web前端'
    }
},

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

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

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

slot 的使用需要两步：
1、在HTML的组件中用slot 属性传递值。

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

2、在组件模板中用标签接收值。

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

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

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

Argent_

发布了36 篇原创文章 · 获赞 12 · 访问量 4万+

私信关注

【vue】内置组件 -slot讲解

猜你喜欢