vue具名插槽使用

插槽用法：子组件header固定；父组件outside插槽
header/index.vue

<template>
    <div :class="['header-wrap',fixed?'fixed':'',shadow?'shadow':'']" :style="{'background-color':bgColor,color}">
        <div class="header">
            <div class="left" v-if="$slots.left">
                <slot name="left"></slot>
            </div>
            <div class="left" v-else>
                <div @click="to" v-if="arrow">
                    <i class="iconfont icon-fh"></i>
                    <span v-if="backText">{{backText}}</span>
                </div>
            </div>
            <div class="content">
                <div class="middle" v-if="$slots.title">
                    <slot name="title"></slot>
                </div>
                <div class="middle" v-else>{{title}}</div>
            </div>
            <div class="right">
                <slot name="right"></slot>
            </div>
        </div>
    </div>
</template>

<script>
    export default {
        props: {
            title: String,
            arrow: {
                type: Boolean,
                default: false
            },
            backText: String,
            shadow: {
                type: Boolean,
                default: true
            },
            fixed: {
                type: Boolean,
                default: true
            },
            bgColor: {
                type: String,
                default: '#262D47'
            },
            color: {
                type: String,
                default: '#D9AC71'
            },
            link: String
        },
        methods: {
            to() {
                if (this.link) {
                    this.$router.push(this.link)
                } else {
                    this.$router.back()
                }

            }
        }
    }
</script>

<style lang='less' scoped>
    .header-wrap {
        width: 100%;
        height: 48px;
        padding: 0 10px;
        &.fixed {
            position: fixed;
            left: 0;
            top: 0;
            z-index: 999;
        }
        &.shadow {
            box-shadow: 4px 0 8px rgba(0, 0, 0, .1);
        }
        .header {
            height: 100%;
            display: flex;
            justify-content: space-between;
            align-items: center;
            .left {
                display: flex;
                align-items: center;
                width: 60px;
                font-size: 14px;
                div {
                    height: 100%;
                    display: flex;
                    align-items: center;
                    i {
                        font-size: 14px;
                    }
                    span {
                        margin-left: 4px;
                    }
                }
            }
            .content {
                width: 0;
                flex: 1;
                display: flex;
                justify-content: center;
                .middle {
                    font-size: 16px;
                    overflow: hidden;
                    text-overflow: ellipsis;
                    white-space: nowrap;
                }
            }
            .right {
                display: flex;
                justify-content: flex-end;
                width: 60px;
                font-size: 13px;
                a {
                    color: @link-color;
                }
            }
        }
    }
</style>

outside/index.vue

<div id="outside">
            <Header>
                <div slot="left" @click="onFinish">
                    <i class="iconfont icon-fh"></i>
                </div> 
                <div slot="title" class="title-wrap">
                    <mu-menu :open.sync="menuVisible" v-show="tradeTab.active==0||tradeTab.active==1">
                        <div class="dropdown-btn">
                            {{coin}}/xxx
                            <mu-icon value="arrow_drop_down" size="28"></mu-icon>
                        </div>
                        <mu-list slot="content">
                            <mu-list-item v-for="coin in coins" :key="coin" @click.native="switchCoin(coin)">
                                <mu-list-item-title>{{coin}}</mu-list-item-title>
                            </mu-list-item>
                        </mu-list>
                    </mu-menu>
                </div>
                <div slot="right" class="title-rank">
                    <div v-if="!userInfo.trade_level" class="ranktext" @click="clickrank">xxx</div>
                    <img v-else class="rankimg" @click="clickrank" :src="items[userInfo.trade_level-1].img" alt="">
                    <div class="line"></div>
                    <div class="fabu" @click="onjump">发布</div>
                </div>
            </Header>
        </div>
<script>
    import Header from '@/components/header/index.vue'
export default {
  components: {
            Header
        },
}
</script>