Vue组件中slot的用法

Vue组件中slot的用法

主要是让组件的可扩展性更强。

1. 使用匿名slot

//定义组件my-component
<div class="myComponent">
<slot></slot>
</div>
//使用方法
<my-component>
<p>我就是slot的替代内容，这里可以放任何标签元素</p>
</my-component>

2. 给slot加个名字

//定义组件my-component
<div class="myComponent">
<slot name="mySlot"></slot>
</div>
//使用方法
<my-component>
<p slot="mySlot">
我就是这个叫mySlot的slot替代内容，这里可以放任意标签，即使是一长串ul》li列表，但是我是一个有名字的宝宝，所以你必须给我加上slot=“mySlot”不然我就报错给你看！
</p>
</my-component>

如果不在有slot的组件里加入任何标签，slot什么都不会显示的。

应用场景：

案例： 饿了么页面头部，根据slot中name不同，显示不同的标签

头部组件代码：

template>
<header id='head_top'>
<slot name='logo'></slot>
<slot name='search'></slot>
<section class="head_goback" v-if="goBack" @click="$router.go(-1)">
<svg width="100%" height="100%" xmlns="http://www.w3.org/2000/svg" version="1.1">
<polyline points="12,18 4,9 12,0" style="fill:none;stroke:rgb(255,255,255);stroke-width:2"/>
</svg>
</section>
<router-link :to="userInfo? '/profile':'/login'" v-if='signinUp' class="head_login">
<svg class="user_avatar" v-if="userInfo">
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#user"></use>
</svg>
<span class="login_span" v-else>登录|注册</span>
</router-link>
<section class="title_head ellipsis" v-if="headTitle">
<span class="title_text">{{headTitle}}</span>
</section>
<slot name="edit"></slot>
<slot name="msite-title"></slot>
<slot name="changecity"></slot>
<slot name="changeLogin"></slot>
</header>
</template>

定位页面调用：
<head-top signin-up='home'>
<span slot='logo' class="head_logo" @click="reload">ele.me</span>
</head-top>