半亩花田i
平时学习的笔记以及写的demo,仅供参考
posts - 65,comments - 2,views - 94458
深入了解组件- -- 插槽

gitHub地址：https://github.com/huangpna/vue_learn/example里面的lesson10

一 插槽内容

 举例：

复制代码
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>index1</title>
</head>
<body>
<!--插槽-->
    <div id="app1">
        <navigation-link>
            <font-awesome-icon></font-awesome-icon>
        </navigation-link>
    </div>
</body>
<script src="../js/vue.js"></script>
<script>
    Vue.component('navigation-link',{
        template:'<div><a href="https://www.baidu.com">百度一下</a><slot></slot></div>'
    });
    Vue.component('font-awesome-icon',{
        template:'<span>另一个组件</span>'
    });
    new Vue({
        el:'#app1'
    })
</script>
</html>
复制代码

当组件渲染的时候，这个 <slot> 元素将会被替换为<font-awesome-icon>组件内的内容。插槽内可以包含字符串以及任何模板代码，包括 HTML。如果 <navigation-link> 没有包含一个 <slot> 元素，则任何传入它的内容都会被抛弃。

注意：如果 <navigation-link> 没有包含一个 <slot> 元素，则任何传入它的内容都会被抛弃。

二 具名插槽

有些时候我们需要用到多个插槽，对于这样的情况，我们可以用以下两种方式。

举例（方法一）：

复制代码
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>index2</title>
</head>
<body>
    <div id="app2">
        <group-assembly-temp>
            <template slot="header">   //向具名插槽提供内容
                <h1>头部</h1>
            </template>
            <template slot="main">
                <h1>主体内容</h1>
            </template>
            <template slot="footer">
                <h1>尾部</h1>
            </template>
        </group-assembly-temp>
    </div>
</body>
<script src="../js/vue.js"></script>
<script>
    var groupAssemblyTemp = {
        template:`<div class="container">
                        <header>
                            <slot name="header"></slot>    //定义插槽
                        </header>
                        <main>
                            <slot name="main"></slot>
                        </main>
                        <footer>
                            <slot name="footer"></slot>
                        </footer>
                  </div>`
    };
    new Vue({
        el:'#app2',
        components:{
            'group-assembly-temp':groupAssemblyTemp
        }
    })
</script>
</html>
复制代码

在这里，<slot> 元素有一个特殊的特性：name。这个特性可以用来定义额外的插槽，在向具名插槽提供内容的时候，我们可以在一个父组件的 <template> 元素上使用 slot 特性

举例（方法二）：

复制代码
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>index3</title>
</head>
<body>
<div id="app3">
    <group-assembly-temp>
        <h1 slot="header">Here might be a page title</h1>

        <p>A paragraph for the main content.</p>
        <p>And another one.</p>

        <p slot="footer">Here's some contact info</p>
    </group-assembly-temp>
</div>
</body>
<script src="../js/vue.js"></script>
<script>
    var groupAssemblyTemp = {
        template:`<div class="container">
                        <header>
                            <slot name="header"></slot>
                        </header>
                        <main>
                            <slot name="main"></slot>
                        </main>
                        <footer>
                            <slot name="footer"></slot>
                        </footer>
                  </div>`
    };
    new Vue({
        el:'#app3',
        components:{
            'group-assembly-temp':groupAssemblyTemp
        }
    })
</script>
</html>
复制代码

在这里，我们是直接把slot 特性直接用到一个普通元素上。

默认插槽

 我们也可以保留一个未命名插槽，这个插槽是默认插槽，也就是说它会作为所有未匹配到插槽的内容的统一出口。

复制代码
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>index3</title>
</head>
<body>
<div id="app3">
    <group-assembly-temp>
        <h1 slot="header">Here might be a page title</h1>
　　　　　　//默认插槽内容
        <p>A paragraph for the main content.-----默认插槽</p>
        <p>And another one.-----默认插槽</p>
        <p>Here's some contact info-----默认插槽</p>

        <p slot="footer">Here's some contact info</p>
    </group-assembly-temp>
</div>
</body>
<script src="../js/vue.js"></script>
<script>
    var groupAssemblyTemp = {
        //定义一个未命名插槽
        template:`<div class="container">
                        <header>
                            <slot name="header"></slot>
                        </header>
                        <main>
                            <slot></slot>
                        </main>
                        <footer>
                            <slot name="footer"></slot>
                        </footer>
                  </div>`
    };
    new Vue({
        el:'#app3',
        components:{
            'group-assembly-temp':groupAssemblyTemp
        }
    })
</script>
</html>
复制代码

三 插槽的默认内容

举例：

复制代码
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>index4</title>
    <style>
        .container{
            width:600px;
            height:500px;
            border:1px solid red;
        }
    </style>
</head>
<!--定义插槽的默认内容-->
<body>
    <div id="app4">
        <default-con-slot></default-con-slot>
    </div>
</body>
<script src="../js/vue.js"></script>
<script>
    var defaultConSlot = {
        template:`
                <div class="container">
                       <slot>默认插槽内容</slot>
                </div>
        `
    };
    new Vue({
        el:'#app4',
        components:{
            'default-con-slot':defaultConSlot
        }
    })
</script>
</html>
复制代码

 

有时候为插槽提供默认内容是很有用的，比如上述默认显示“默认插槽内容”，但是这个时候我向<default-con-slot></default-con-slot>里面插入内容，便会把原有的内容覆写。

四 作用域插槽

之前有学过，但是感觉当时听的也是半懂不懂的所以之后出来工作也就很少用，这次在公司里正好蹭下一次需求还没澄清有点时间，从vue官方文档一步一步的把很多知识点不管是以前会的还是不会的都整理了一下，希望后面能够坚持用，把自己的代码基础提一步起来。。。。

首先我们先举一个简单的例子：

复制代码
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>index5</title>
    <style>
        li{
            list-style:none;
        }
    </style>
</head>
<body>
    <div id="app5">
        <blog-test v-bind:todos="todos">
            <template slot-scope="list">
                    {{list}}
            </template>
        </blog-test>
    </div>
</body>
<script src="../js/vue.js"></script>
<script>
    /**
     * 作用域插槽
     * */
    var blogTest = {
          props:['todos'],
          template:`
                  <ul>
                      <li
                        v-for="todo in todos"
                        v-bind:key="todo.id"
                      >
                        <slot :arr="todo"></slot>
                      </li>
                  </ul>
          `
    };
    new Vue({
        el:'#app5',
        data:{
            todos:[
                {id:1,name:'孙悟空'},
                {id:2,name:'猪八戒'},
                {id:3,name:'沙和尚'},
                {id:4,name:'唐僧'},
                {id:5,name:'小白龙'}
            ]
        },
        components:{
            'blog-test':blogTest
        }
    })
</script>
</html>
复制代码

 

作用：主要用于有时候你希望提供的组件带有一个可从子组件获取数据的可复用的插槽。为了让这个特性成为可能，你需要做的全部事情就是将数据包裹在一个 <slot> 元素上，然后将所有和其上下文相关的数据传递给这个插槽；然后在使用这个组件的时候，我们可以通过 slot-scope 特性从子组件获取数据。

注意：在 2.5.0+，slot-scope 不再限制在 <template> 元素上使用，而可以用在插槽内的任何元素或组件上。

posted on   半亩花田i  阅读(852)  评论(0)  编辑  收藏  举报
编辑推荐：
· 10年+ .NET Coder 心语，封装的思维：从隐藏、稳定开始理解其本质意义
· .NET Core 中如何实现缓存的预热？
· 从 HTTP 原因短语缺失研究 HTTP/2 和 HTTP/3 的设计差异
· AI与.NET技术实操系列：向量存储与相似性搜索在 .NET 中的实现
· 基于Microsoft.Extensions.AI核心库实现RAG应用
阅读排行：
· TypeScript + Deepseek 打造卜卦网站：技术与玄学的结合
· 阿里巴巴 QwQ-32B真的超越了 DeepSeek R-1吗？
· 【译】Visual Studio 中新的强大生产力特性
· 10年+ .NET Coder 心语 ── 封装的思维：从隐藏、稳定开始理解其本质意义
· 【设计模式】告别冗长if-else语句：使用策略模式优化代码结构
< 2025年3月 >
日 一 二 三 四 五 六
23 24 25 26 27 28 1
2 3 4 5 6 7 8
9 10 11 12 13 14 15
16 17 18 19 20 21 22
23 24 25 26 27 28 29
30 31 1 2 3 4 5

Copyright © 2025 半亩花田i
Powered by .NET 9.0 on Kubernetes Powered By博客园
点击右上角即可分享
微信分享提示
AI IDE Trae