Vue 插槽

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

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

第一步 : 定义一个待办事项的组件


<todo>todo>
<script type="text/javascript">
// 定义一个待办事项的组件
Vue.component('todo', {
template: '<div>\
            <div>待办事项div>\
             <ul>\
               <li>学习Javali>\
             ul>\
            div>'
});
script>

第二步 : 让待办事项的标题和值实现动态绑定 留出一个插槽

1 、将上面的代码留出一个插槽 , 即 slot


Vue.component('todo', {
template: '<div>\
            <slot name="todo-title">slot>\
             <ul>\
               <slot name="todo-items">slot>\
             ul>\
           div>'
});

2 、定义一个名为 todo-title 的待办标题组件和 todo-items 的待办内容组件


Vue.component('todo-title', {
         props: ['title'],
         template: '<div>{{title}}div>'
});


//这里的index,就是数组的下标,使用for循环遍历的时候,可以循环出来!
Vue.component('todo-items', {
      props: ['item', 'index'],
      template: '<li>{{index + 1}}. {{item}}li>'
});

3 、实例化 Vue 并初始化数据


new Vue({
       el: '#app',
       data: {
         todoItems: ['狂神说Java', '狂神说运维', '狂神说前端']
       }
})

4 、将这些值 , 通过插槽插入


<div id="app">
    <todo>
       <todo-title slot="todo-title" title="秦老师系列课程">todo-title>
       <todo-items slot="todo-items" v-for="(item, index) in todoItems"
                    v-bind:item="item" v-bind:index="index">todo-items>
    todo>
div>

说明 : 我们的 todo-title 和 todo-items 组件分别被分发到了 todo 组件的 todo-title 和 todo-items 插槽

中

相关阅读:
Nginx简介与Docker Compose部署指南
【CKS】考试之 kube-bench CIS 基准测试
蓝鹏测控公司全长直线度算法项目多部门现场组织验收
13、Mybatis框架-2
用户运营中，数据分析给与企业的三个精准帮助
C++ 【类和对象: 析构函数，拷贝构造函数，运算符重载 --2】
【linux】centos7 yum安装nginx
Android 发布Library 到远程maven 私服仓库（Nexus）
降级、熔断和限流———一看就会
addr2line 回复“问号”问题的解决和一些发现

原文地址：https://blog.csdn.net/m0_53354306/article/details/127604750