vue-slot_vue插槽清空-CSDN博客

本文介绍了Vue.js中slot的使用，包括具名slot的使用，强调了具名slot未指定时仅覆盖默认样式。接着讨论了编译作用域，说明父组件和子组件模板的编译范围。最后，详细阐述了作用域插槽的实现，需要在子组件的slot中添加数据属性，并在父组件中通过slot-scope引用并访问这些数据。

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

slot

在这里插入图片描述

<body>
    <div id="app">
        <cpn><p>我是第一</p></cpn>
        <cpn></cpn>
        <cpn></cpn>
        <cpn>
            <p>我是最后一个</p>
            <p>二号和二号</p>
            <button>dddd</button>
        </cpn>
    </div>
    <!-- 子组件template -->
    <template id="cpntemplate">
        <div>
            <p>我是组件</p>
            <!-- slot中设置默认样式 -->
            <slot><button>点我</button></slot>
        </div>
    </template>
    <script>
        // 子组件
        const cpn = {
            template:"#cpntemplate",
        }
        //父组件
        var app = new Vue({
            el: "#app",
            components:{
                cpn
            },
        })
    </script>
</body>

结果：
在这里插入图片描述

具名slot的使用

当slot有名字的时候，如果子组件中没有指定名字，只会覆盖没有名字的slot的中的默认样式

<body>
    <div id="app">
        <cpn><p>我是第一</p></cpn>
    </div>
    <!-- 子组件template -->
    <template id="cpntemplate">
        <div>
            <slot name="left"><span>left</span></slot>
            <slot name="center"><span>center</span></slot>
            <slot name="right"><span>right</span></slot>
            <slot>hahah</slot>
        </div>
    </template>
    <script>
        // 子组件
        const cpn = {
            template:"#cpntemplate",
        }
        //父组件
        var app = new Vue({
            el: "#app",
            components:{
                cpn
            },
        })
    </script>
</body>

结果：
在这里插入图片描述
指定slot名字

<body>
    <div id="app">
        <cpn><p slot="left">我是第一</p></cpn>
    </div>
    <!-- 子组件template -->
    <template id="cpntemplate">
        <div>
            <slot name="left"><span>left</span></slot>
            <slot name="center"><span>center</span></slot>
            <slot name="right"><span>right</span></slot>
            <slot>hahah</slot>
        </div>
    </template>
    <script>
        // 子组件
        const cpn = {
            template:"#cpntemplate",
        }
        //父组件
        var app = new Vue({
            el: "#app",
            components:{
                cpn
            },
        })
    </script>
</body>

在这里插入图片描述

编译作用域

父组件模板中的所有东西都会在父级作用域内编译，子组件模板的所有东西都会在子级作用域内编译

在这里插入图片描述

作用域插槽

步骤:

在子组件的slot中添加：(属性名) 绑定需要获取的数据
父组件使用子组件时，slot中使用slot-scope=”slot“，引用子组件的slot，然后就可以通过==slot.(属性名)==获取数据

<body>
    <div id="app">
        <cpn></cpn>
        <!-- 需要实现获取子组件中的language，将其拼接成字符串 -->
        <!-- 错误写法：编译器会去vue实例中找language -->
        <!-- <cpn>
            <ul>
                <li v-for="item in language">{{item}}</li>
            </ul>
        </cpn> -->
        <cpn>
            <!-- 引用slot，然后获取数据 -->
            <template slot-scope="slot">
                <ul>
                    <li v-for="item in slot.data">{{item}}</li>
                </ul>
            </template>
        </cpn>

    </div>
    <!-- 子组件template -->
    <template id="cpntemplate">
        <div>
            <!-- data名字可以随便自己定义 -->
            <slot :data=language>
                <ul>
                    <li v-for="item in language">{{item}}</li>
                </ul>
            </slot>
        </div>
    </template>
    <script>
        // 子组件
        const cpn = {
            template:"#cpntemplate",
            data(){
                return{
                    language:['aaa','bbb','ccc'],
                }
            }
        }
        //父组件
        var app = new Vue({
            el: "#app",
            components:{
                cpn
            },
        })
    </script>
</body>