Vue2，带你看懂插槽的使用_vue2插槽的使用-优快云博客

本文链接：https://blog.youkuaiyun.com/qq_45188736/article/details/122959495

本文详细介绍了Vue2的插槽用法，包括匿名插槽、具名插槽和作用域插槽。匿名插槽用于储存组件内部的匿名元素，具名插槽通过name属性指定插入内容，作用域插槽则允许访问父组件的数据并自定义插槽内容。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

插槽

文章目录

- 插槽

匿名插槽

匿名插槽会储存html组件标签内匿名的标签和元素。

html代码如下：

  <!-- html -->
<div id="app">
        <father>
            <button @click="pop">弹出</button>
            <h1>这是一个h1标签</h1>
        </father>
    </div>

js代码如下：

 <template id="father">
        <div>
            这是一个Father组件
            <slot name="default"></slot> //可以简写成<slot></slot>,匿名插槽会储存默认的所有元素
        </div>
    </template>

具名插槽

只能放具体的name对应的标签元素，并且最终渲染取决于模板标签内的具名插槽顺序。

html代码如下：

   <div id="app">
        <father>
            <!-- 给插槽取名字 -->
            <h4 slot="wgd">我是wgd</h4>
            <h1 slot="h1">这是一个h1标签</h1>
            <h2>这是一个h2 标签</h2>
            <h3>这是一个h3 标签</h3>
        </father>
    </div>

js代码如下：

  <template id="father">
        <div>
            这是一个Father组件
                <!-- 元素的位置由template中的具名插槽的摆放位置有关 -->
            <slot name="h1"></slot>
            <slot name="default"></slot>
            <slot name="wgd"></slot>

        </div>
    </template>

效果图如下：

在这里插入图片描述

作用域插槽

在讲解作用域插槽之前我们需要注意到插槽的一个属性，就是它可以访问当前组件父组件。这一点类似$parent。我们来看下一段代码：

<body>
    <div id="app">
     <father></father>

    </div>

    <!-- 各个模板的书写 -->
    <template id="son">
        <div>
            Son
            <slot></slot> 
            <!-- 这里是插槽，用来接收元素和标签 -->
        </div>

    </template>

    <template id="father">
        <div>
            Father
            <son>
                {{money}}  
                <!-- 这里写了元素，money虽然写在son标签内但是却是像father组件获取的 -->
            </son>

        </div>
    </template>
    <script src="../node_modules/vue/dist/vue.js"></script>
    <script>
        let son = {
            template: '#son'
        }


        let father = {
            template: '#father',
            components: {
                son
            },
            data() {
                return {
                    money: 111234
                }
            }

        }

        const app = new Vue({
            el: '#app',
            components: {
                father,
              
            }
        })
    </script>
</body>

效果图如下：

在这里插入图片描述

可以看到father组件中的data已经渲染出来，所以插槽可以访问当前组件的父亲组件。如果没有父亲组件则访问Vue实例。

好的，那么我们继续来看作用域插槽，我理解它改变了插槽原有的访问父亲组件的属性，现有的属性由当前组件以及自定义获得。使用方法如下：

收先在html的组件标签中我们添加 v-slot='自定义对象'

<div id="app">
        <mynav v-slot="myscope">
        <!-- v-slot接收 -->
            {{myscope.color}}
            <h1 :style="{color:myscope.color}">这是一个h1标签</h1> //注意这里接收到了传递过来的color属性
        </mynav>
    </div>

紧接着，我们想利用插槽传递什么属性需要在插槽中写出，使用方法如下：

 <script>
        let mynav = {
            template: "<div><slot :color='color'></slot></div>",  //注意这里传递了color属性
            data() {
                return {
                    color: "red"
                }
            }
        }
        const app = new Vue({
            el: '#app',
            data: {
                // color: "red"
            },
            components: {
                mynav
            }
        })
    </script>