vue之slot使用

最新推荐文章于 2024-05-18 14:03:48 发布

aa67567456

最新推荐文章于 2024-05-18 14:03:48 发布

阅读量147

点赞数

分类专栏：学习小结文章标签： html html5 css

本文链接：https://blog.csdn.net/aa67567456/article/details/120614309

版权

学习小结专栏收录该内容

9 篇文章 0 订阅

订阅专栏

首页

新闻频道

    </v-two>
</div>
<template id="header">
    <div id="headerindex">
        <div>
            <!-- 插槽的定义 -->
            <slot name="img"></slot>
        </div>
        <div class="list">
            <ul style="list-style: none;display: flex;justify-content: space-between;">
                <li><img src="https://mat1.gtimg.com/rain/bailing20/cb679e98fe43.avatar_placeholder.svg"/></li>
                <li>登录</li>
                <li><img src="data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBhdGggZD0iTTIxLjE4OCAzLjc1SDIuODEzYS4xODguMTg4IDAgMCAwLS4xODguMTg4djEuNWMwIC4xMDMuMDg0LjE4Ny4xODguMTg3aDE4LjM3NWEuMTg4LjE4OCAwIDAgMCAuMTg3LS4xODh2LTEuNWEuMTg4LjE4OCAwIDAgMC0uMTg4LS4xODd6bTAgMTQuNjI1SDIuODEzYS4xODguMTg4IDAgMCAwLS4xODguMTg4djEuNWMwIC4xMDMuMDg0LjE4Ny4xODguMTg3aDE4LjM3NWEuMTg4LjE4OCAwIDAgMCAuMTg3LS4xODh2LTEuNWEuMTg4LjE4OCAwIDAgMC0uMTg4LS4xODd6bTAtNy4zMTNIMi44MTNhLjE4OC4xODggMCAwIDAtLjE4OC4xODh2MS41YzAgLjEwMy4wODQuMTg4LjE4OC4xODhoMTguMzc1YS4xODguMTg4IDAgMCAwIC4xODctLjE4OHYtMS41YS4xODguMTg4IDAgMCAwLS4xODgtLjE4OHoiIGZpbGw9IiNGRkYiIGZpbGwtcnVsZT0ibm9uemVybyIvPjwvc3ZnPg==" /></li>
            </ul>
        </div>
    </div>
</template>
<script src="./js/vue.js"></script>
<script>
    var header={
        template:'#header'
    }
    new Vue({
        el:'#app',
        components:{
            'v-header':header,
            'v-two':header
        }
    })
</script>