vue（十）——插槽slot

最新推荐文章于 2024-06-01 15:46:07 发布

回首＆逝去～

最新推荐文章于 2024-06-01 15:46:07 发布

阅读量192

点赞数

分类专栏： vue 文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/qq_43957263/article/details/126212887

版权

vue 专栏收录该内容

14 篇文章 1 订阅

订阅专栏

摘要

简单来说插槽就是一个占位的标签，当父组件传递进来内容后就会把这个占位标签替换掉。插槽是由于有时组件的要求不一样，为了组件的更多扩展性而进行的一种功能。

插槽主要分为三种：普通插槽（匿名插槽）、具名插槽和作用域插槽。今天主要记录普通插槽和具名插槽；由于距离学习时间有一年多了，作用域插槽放到后面复习后多理解一下再进行记录。

1、普通插槽

vue的插槽是使用<slot></slot>标签来进行定义的。具体使用方法如下：（由于只是演示插槽的使用，为了在一个页面直观的显示，并没有用vue-cli）

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div id="app">
        <!--1、使用默认值-->
        <cpn></cpn>
        <!--2、自定义替换默认值-->
        <cpn><button>替换默认</button></cpn>
        <!--3、多个元素替换默认值-->
        <cpn>
            <button>按钮</button>
            <p>多元素替换</p>
            <button>按钮</button>
        </cpn>
    </div>
    <template id="cpn">
        <div>
            <h2>插槽使用</h2>
            <p>插槽是由于有时组件的要求不一样，为了组件的更多扩展性</p>
            <slot><h6>默认值</h6></slot><!--插槽标签，里面的标签是默认值-->
        </div>
    </template>
    <script src="../node_modules/vue/dist/vue.js"></script>
    <script>
        const app = new Vue({
            el: "#app",
            data: {

            },
            components: {
                cpn: {
                    template: "#cpn",
                }
            }
        });
    </script>
</body>

</html>

结果：

由上述代码和结果可以看出：

1、如果组件中并无传递，插槽会使用默认值，此时也可以把插槽就当做一个div标签

2、插槽可以使用一个标签进行替换，也可以使用多个标签进行替换

2、具名插槽

具名插槽就是给插槽加上一个属性，可以确定你要替换的是哪一部分

例如我们一个项目可能多处需要用到nav组件，但是nav组件有些页面是在中间显示，有些页面是左中右布局，有些页面是左右或者中右布局，这里就可以使用具名插槽来解决。使用方法如下：

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div id="app">
        <h1>默认</h1>
        <cpn></cpn>
        <br>
        <br>
        <hr>
        <!-- 具名插槽可以确定你要替换的是哪一部分 -->
        <h1>替换</h1>
        <cpn>
            <span slot="center">中间替换</span>
        </cpn>
        <cpn>
            <button slot="left">左边替换</button>
        </cpn>
    </div>
    <template id="cpn">
        <div>
            <!-- 当需要替换某个元素时无法确定需要替换哪个元素
            <slot>左边</slot>
            <slot>中间</slot>
            <slot>右边</slot> -->

            <slot name="left">左边</slot>
            <slot name="center">中间</slot>
            <slot name="right">右边</slot>
        </div>
    </template>
    <script src="../node_modules/vue/dist/vue.js"></script>
    <script>
        const app = new Vue({
            el: "#app",
            data: {

            },
            components: {
                cpn: {
                    template: "#cpn"
                }
            }
        });
    </script>
</body>

</html>

结果：