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并初始化数据
将这些值通过插槽插入，注意插槽之间要相互关联，每个插槽也相当于一个组件，插槽也要像组件一样和相关数据进行绑定。

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

在这里插入图片描述

相关阅读:
爬虫的前导知识及requests模块
doker的多容器操作和强制删除容器的方法
maven的.m2文件夹
postgresql Window Functions
dumpbin工具的使用
java aspose cells 读取名称管理器
速卖通测评自养号怎么做？测评方法有哪些？
第2章 Linux的进程管理
「Android」浅析viewBinding和DataBinding
二叉搜索树的应用

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