Vue组件中slot的用法教程

Vue组件中slot的用法教程

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

1. 使用匿名slot

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

2. 给slot加个名字

//定义组件my-component  
<p class="myComponent">  
  <slot name="mySlot"></slot>  
</p>  
//使用方法  
<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="https://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="https://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>