• 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>
  • 相关阅读:
    第一周C语言作业
    C语言I博客园作业08
    C语言I博客作业07
    C语言I博客作业06
    C语言I博客作业05
    C语言I博客作业04
    C语言II博客作业04
    C语言II博客作业03
    C语言II博客作业02
    C语言II博客作业01
  • 原文地址:https://www.cnblogs.com/mxsf/p/10868306.html
Copyright © 2020-2023  润新知