slot

最新推荐文章于 2025-09-01 21:25:24 发布

原创最新推荐文章于 2025-09-01 21:25:24 发布 · 166 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js

基础专栏收录该内容

79 篇文章

订阅专栏

本文探讨了Vue框架中插槽的作用，如何通过插槽提高组件的灵活性和可扩展性。示例展示了如何在`<cpn>`组件中利用具名插槽`left`, `center`, `right`来定制内容，实现不同场景下的内容替换和组件复用。通过插槽，开发者可以更方便地在组件内部插入自定义元素，提升应用的模块化程度。

slot目的

让原来的设备具备更多扩展性

组件的插槽

使封装组件更具扩展性
灵活更改组件内部一些内容

抽取共性，保留不同 一样的封存到组件内，不一样的预留成插槽

    <div id="app">
        <cpn>
            <span slot="center">change</span>
        </cpn>
        <cpn>
            <button slot="right">return</button>
        </cpn>
        <cpn>one</cpn>
    </div>

    <template id="cpn">
        <div>
          <slot name="left"><span>left</span></slot>
          <slot name="center"><span>center</span></slot>
          <slot name="right"><span>right</span></slot>

          <slot>two</slot>
        </div>
    </template>