Vue の插槽

最新推荐文章于 2023-01-03 11:30:22 发布

沧海一声笑·rush

最新推荐文章于 2023-01-03 11:30:22 发布

阅读量86

点赞数

分类专栏：前端

本文链接：https://blog.csdn.net/zhaozhao236/article/details/109331874

版权

前端专栏收录该内容

32 篇文章 0 订阅

订阅专栏

文章目录

1.为什么要用插槽

usb等插槽的目的是让我们原来的设备，具有更多的扩展性。
同样的，组件的插槽，也是为了我们封装的组件更加具有扩展性，让使用者可以决定组件的内部到底展示什么

比如说，如下的需求：
当模板复用的时候。我第一次用的时候，下边想让他显示一个按钮，第二次用的时候，想让他显示一个 p 标签，所以，这种情况下。我们就把最后一行，给他搞成活的，这样，我们就灵活的使用组件进行开发了。
在这里插入图片描述

2.插槽的基本使用

其实也简单，只要添加一个 slot 标签就可以了

 <template>
        <div>
            <h1>我是标题</h1>
            <p>我是组件。哈哈哈</p>
          <slot></slot>
        </div>
    </template>

使用插槽的时候，直接把标签写在里面就好了

<body>
    <!-- 父组件模板 -->
    <div id='app'>
        <!-- 插槽的东西直接放在中间就可以了 -->
        <cpn><button>点击按钮</button></cpn>
        <cpn>
            <p>你好吗？</p>
        </cpn>
        <cpn></cpn>

    </div>


    <!-- 子组件模板 -->
    <template id="cpn">
        <div>
            <h1>我是标题</h1>
            <p>你好</p>
            <slot></slot>
        </div>
    </template>

    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        // 子组件
        const cpn = {
            template: '#cpn',
        }

        // 父组件
        const app = new Vue({
            el: '#app',
            data: {

            },
            components: {
                // 当组件的原名和要命的名重合，就可以这样简写
                cpn
            }
        })
    </script>
</body>

效果图：
在这里插入图片描述
为了避免插槽里面的东西多有重复，可以给插槽设置默认值

 <template id="cpn">
        <div>
            <h1>我是标题</h1>
            <p>你好</p>
            <slot><h2>设置的默认值</h2></slot>
        </div>
    </template>

3.具名插槽

当有多个组件的插槽的时候，具体应该更换哪一个插槽！

<body>
    <!-- 父组件模板 -->
    <div id='app'>
        <cpn><span slot="center">标题</span></cpn>
    </div>


    <!-- 子组件模板 -->
    <template id="cpn">
        <div>
            <slot name="left"><span>左边</span></slot>
            <slot name="center"><span>中间</span></slot>
            <slot name="right"><span>右边</span></slot>
        </div>
    </template>

    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        // 子组件
        const cpn = {
            template: '#cpn',
        }

        // 父组件
        const app = new Vue({
            el: '#app',
            data: {

            },
            components: {
                // 当组件的原名和要命的名重合，就可以这样简写
                cpn
            }
        })
    </script>
</body>

沧海一声笑·rush

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Vue の插槽

文章目录1.为什么要用插槽2.插槽的基本使用3.具名插槽1.为什么要用插槽usb等插槽的目的是让我们原来的设备，具有更多的扩展性。同样的，组件的插槽，也是为了我们封装的组件更加具有扩展性，让使用者可以决定组件的内部到底展示什么比如说，如下的需求：当模板复用的时候。我第一次用的时候，下边想让他显示一个按钮，第二次用的时候，想让他显示一个 p 标签，所以，这种情况下。我们就把最后一行，给他搞成活的，这样，我们就灵活的使用组件进行开发了。2.插槽的基本使用其实也简单，只要添加一个 s
复制链接

扫一扫