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

最新推荐文章于 2024-10-03 18:17:36 发布

原创最新推荐文章于 2024-10-03 18:17:36 发布 · 3.3k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#slot #组件 #样式

vue笔记专栏收录该内容

26 篇文章

订阅专栏

本文详细解析了在Vue中如何正确使用子组件的Slot特性，包括在子组件模板内定义具名Slot，并在父组件中通过指定slot属性来填充内容。通过一个具体的示例，展示了如何实现头部组件的左右两侧自定义布局。

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>

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

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