vue学习笔记27 内置组件 slot

1、写一个模板

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

    </div>
</template>

2、写一个组件

var author={

　　template:"#tmp"

}

 

components:{

　　"author":author

}

 

3、组件里传值

<author>

　　<span slot="blogUrl">{{userData.blogUrl}}</span>

</author>

4、在模板里接收

<template id="tp">
　　<div>
　　　　<p>博客：<slot name="blogUrl"></slot></p>
　　　　<p>网名：<slot name="netName"></slot></p>
　　　　<p>技能：<slot name="skill"></slot></p>
　　</div>
</template>