Vue插槽slot详解

在 Vue 中我们使用元素，作为承载分发内容的出口，作者称其为插槽，可以应用在组合组件的场景中;

比如准备制作一个待办事项组件（todo），该组件由待办标题（todo-title）和待办内容（todo-items）组成，但这三个组件又是相互独立的，该如何操作呢？

demo

在这里插入图片描述
slot.html

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Titletitle>
head>
<body>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js">script>


<div id="app">






    <todo>
        <todo-title slot="todo-title" v-bind:mytitle="title">todo-title>
        <todo-items slot="todo-items" v-for="item in todoItems" v-bind:myitem="item">todo-items>
    todo>
div>
<script>
    Vue.component("todo",{
        template:'\
                  \
                  \
                    \
                   \
                
'
    });
    Vue.component("todo-title",{
        props:['mytitle'],
       template: '{{mytitle}}
'
    });
    Vue.component("todo-items",{
        props:['myitem'],
        template:'{{myitem}}
 '
    })
    var vm=new Vue({
        el:"#app",
        data:{
            title:"冷丁",
            todoItems:['JAVA','C++','Go']
        }
    });
script>
body>
html>
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
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49

首先定义了一个待办事项组件，需要让代办事项的标题和值实现动态绑定，我们可以使用插槽来实现。
定义一个名为todo-title的待办标题组件和todo-items的待办内容组件。
实例化Vue并初始化数据
将这些值通过插槽插入，注意插槽之间要相互关联，每个插槽也相当于一个组件，插槽也要像组件一样和相关数据进行绑定。

如果对您有帮助，免费的赞点一个～～～感谢🙏

在这里插入图片描述

相关阅读:
RS485电路设计
【题解集合】剑指offer第二版
WKWebKit总结
[ Linux 长征路第二篇] 基本指令head,tail,date,cal,find,grep,zip,tar,bc,unname
【学习笔记18】JavaScript对象的基本认识
12 个优化 Docker 镜像安全性的技巧
GenICam GenTL 标准 ver1.5（3）第四章
elf 文件信息的用途
win10 上PHP artisan storage:link 出现 symlink (): Protocol error的解决办法
Termius for Mac v8.4.0激活版下载

原文地址：https://blog.csdn.net/qq_41359998/article/details/122893885