vue在slot子组件里的内容样式不作用

vicky_yongqi

于 2019-12-11 10:55:02 发布

阅读量3.3k

点赞数

CC 4.0 BY-SA版权

分类专栏： vue笔记文章标签： slot 组件样式

本文链接：https://blog.csdn.net/vicky_yongqi/article/details/103488555

vue笔记专栏收录该内容

26 篇文章

订阅专栏

slot在子组件里不作用，但在父组件里能作用

eg.成功代码及效果
子组件：

<template>
<div>
    <div class="top_container">
        <slot name="left"/>
        <div class="top_title ellipsis">{{title}}</div>
        <slot name="right"/>
    </div>
</div>
</template>

父组件：

<Header title="广东科学中心（番禺区科普路168号）">
        <div class="top_left" slot="left">
            <i class="iconfont icon-sousuo"></i>
        </div>
        <div class="top_right" slot="right">登录|注册</div>
    </Header>

成功效果：
在这里插入图片描述

失败效果：
把父组件的样式放在子组件后，样式是完全不生效：