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>

Vue组件中slot的用法

Vue组件中slot的用法

猜你喜欢