Vue学习：默认插槽

最新推荐文章于 2024-07-22 10:50:59 发布

¡Venceremo

最新推荐文章于 2024-07-22 10:50:59 发布

阅读量96

点赞数

分类专栏： Vue 文章标签：学习 Powered by 金山文档

本文链接：https://blog.csdn.net/weixin_47295886/article/details/129409345

版权

Vue 专栏收录该内容

155 篇文章 1 订阅

订阅专栏

文章讲述了如何封装一个名为Category的组件，组件接收app传来的参数，特别是title和img标签的内容。在Category中，img标签未显示，提示需要使用插槽来添加内容。同时讨论了直接在app中写样式与在插槽中添加样式的影响。

摘要由CSDN通过智能技术生成

封装组件：category

将index中的样式注注释掉

app保存了参数，传递给Category

title：标签属性 img标签体内容

        <Category title="美食" >
            <img src="https://tse2-mm.cn.bing.net/th/id/OIP-C.uftJawG8PPaBD5D7AxWeXwHaHa?pid=ImgDet&rs=1" alt="">
        </Category>

但是image没显示需要夹插槽，slot

    <div class="category">
        <h3>{{title}}分类</h3>
        <!-- 定义一个插槽（挖个坑，等着组件的使用者进行填充） -->
        < >我是一些默认值，当使用者没有传递具体结构时，我会出现</slot>
    </div>

controls：控制播放