Vue組件通信的slot和props實現頂部標題欄

一、HeaderTop.vue

<template>
    <header class="header">
        <slot name="left"></slot>
        <span class="header_title">
            <span class="header_title_text ellipsis">{{ title }}</span>
        </span>
        <slot name="right"></slot>
    </header>
</template>

<script>
    export default {
        name: 'HeaderTop',
        props: {
            title: String
        }
    }
</script>

二、Msite.vue

<template>
        <!--首頁頭部-->
        <HeaderTop title="昌平區北七家宏福科技園(337省道北)">
            <span class="header_search" slot="left">
                <i class="iconfont icon-sousuo"></i>
            </span>
            <span class="header_login" slot="right">
                <span class="header_login_text">登錄|注冊</span>
            </span>
        </HeaderTop>
</template>

<script>
    import HeaderTop from '../../components/HeaderTop/HeaderTop'
    export default {
        name: 'Msite',
        components: {
            HeaderTop
        }
    }
</script>

三、Order.vue

<template>
    <div class="order">
        <HeaderTop title="訂單列表"/>
    </div>
</template>

<script>
    import HeaderTop from '../../components/HeaderTop/HeaderTop'
    export default {
        name: 'Order',
        components: {
            HeaderTop
        }
    }
</script>