slot——插槽和ES模块的导入导出

最新推荐文章于 2022-05-02 13:03:30 发布

Astra27

最新推荐文章于 2022-05-02 13:03:30 发布

阅读量403

点赞数 1

本文链接：https://blog.csdn.net/Phoebe4/article/details/113787225

版权

slot——插槽和ES模块的导入导出

组件的插槽（一个预留空间）

目的：让封装更具有扩展性，让使用者可以决定组件内部一些内容究竟展示什么
如何封装：将共性抽取到组件，将不同暴露为插槽

<body>
    <div id="app">
        <cpn><button>第一个组件放入按钮</button></cpn>
        <cpn><span>第二个组件放入span标签</span></cpn>
        <cpn><h2>第三个放入h标签</h2></cpn>
        <cpn><button>这个也放入按钮</button></cpn>
    </div>

    <template id="cpn">
        <div>
            <h2>舒宝哈哈哈</h2>
            <p>婷宝哈哈哈</p>
            <slot></slot>
            <!-- 插槽也可以有默认值比如在<slot></slot>中间放一个buuton标签，此时上面组件中没有传入插槽的自定义内容就会以默认值出现-->
        </div>
    </template>

    <script src="./vue.js"></script>
    <script>
        const app =

最低0.47元/天解锁文章

Astra27

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
slot——插槽和ES模块的导入导出

slot——插槽和ES模块的导入导出组件的插槽（一个预留空间）目的：让封装更具有扩展性，让使用者可以决定组件内部一些内容究竟展示什么如何封装：将共性抽取到组件，将不同暴露为插槽<body> <div id="app"> <cpn><button>第一个组件放入按钮</button></cpn> <cpn><span>第二个组件放入span标签</span&
复制链接

扫一扫