理解Vue插槽机制-优快云博客

本文链接：https://blog.youkuaiyun.com/HelloWord176/article/details/106717908

本文深入解析Vue中的插槽概念，包括其基本原理、匿名插槽及具名插槽的使用方式，帮助开发者掌握如何利用插槽进行内容分发，增强组件间的交互性和灵活性。

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

什么是插槽？

插槽就是子组件中的提供给父组件使用的一个占位符，用<slot></slot> 表示，父组件可以在这个占位符中填充任何模板代码，如 HTML、组件等，填充的内容会替换子组件的<slot></slot>标签。

匿名插槽：

　　一句话：插槽内可以是任意内容。

　　　先看一下下面的代码：声明一个com组件，

　　　如果现在我想在<com></com>内放置一些内容，结果会是怎样？

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="./js/vue.js"></script>
</head>

<body>
    <div id="app">
        <com>你好</com>
    </div>
    <script>
        var com = {  
            template: `
                <div>匿名插槽</div>
            `
        }
        Vue.component('com' , com)
        var vm=new Vue({
           el:'#app',
           data:{},
           methods:{}
        });
    </script>
</body>
</html>

输出内容还是在组件中的内容，在 <com>内写的内容没起作用。

这就是插槽出现的作用

我们现在给组件增加一个<slot></slot>插槽

我们在<comt></com>内写的"你好"起作用了！！！

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="./js/vue.js"></script>
</head>

<body>
    <div id="app">
        <com>你好</com>
    </div>
    <script>
        var com = {  
            template: `
                <div>
                    匿名插槽
                    <slot></slot>
                </div>
                
            `
        }
        Vue.component('com' , com)
        var vm=new Vue({
           el:'#app',
           data:{},
           methods:{}
        });
    </script>
</body>
</html>