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 插槽

中

相关阅读:
esp8266网页控制RGB灯颜色
黑马C++ 03 提高7 —— STL函数对象
Spring Boot项目配置多个数据源
java实现将List＜User＞里面很多数据的几个字段提取出来快速写到txt 文件里面
SAP UX 用户体验师这个职位的技能要求和日常工作内容介绍
SpringMVC
【知识点】怎么确定时间复杂度与空间复杂度
解决 Spring Boot 与 springfox 的 NullPointerException 问题
ElasticSearch三种分页对比
Qt入门（八）——Qt打包（将Qt文件可以在别的Windows系统下运行）

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