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>

 

转载于:https://www.cnblogs.com/mxsf/p/10868306.html