• Vue 插槽

    在 Vue 中我们使用 元素 作为承载分发内容的出口 作者称其为插槽 可以应用在组合组
    件的场景中 比如准备制作一个待办事项组件（todo ） 该组件由待办标题（ todo-title ）和待办内容（ todo-items） 组成 但这三个组件又是相互独立的 该如何操作
    第一步 : 定义一个待办事项的组件 
    1. <todo>todo>
    2. <script type="text/javascript">
    3. // 定义一个待办事项的组件
    4. Vue.component('todo', {
    5. template: '<div>\
    6.             <div>待办事项div>\
    7.              <ul>\
    8.                <li>学习Javali>\
    9.              ul>\
    10.             div>'
    11. });
    12. script>
    第二步 : 让待办事项的标题和值实现动态绑定    留出一个插槽
    1 、将上面的代码留出一个插槽 , 即 slot 
    1. Vue.component('todo', {
    2. template: '<div>\
    3.             <slot name="todo-title">slot>\
    4.              <ul>\
    5.                <slot name="todo-items">slot>\
    6.              ul>\
    7.            div>'
    8. });
    2 、定义一个名为 todo-title 的待办标题组件 和 todo-items 的待办内容组件 
    1. Vue.component('todo-title', {
    2.          props: ['title'],
    3.          template: '<div>{{title}}div>'
    4. });
    1. //这里的index,就是数组的下标,使用for循环遍历的时候,可以循环出来!
    2. Vue.component('todo-items', {
    3.       props: ['item', 'index'],
    4.       template: '<li>{{index + 1}}. {{item}}li>'
    5. });
    3 、实例化 Vue 并初始化数据 
    1. new Vue({
    2.        el: '#app',
    3.        data: {
    4.          todoItems: ['狂神说Java', '狂神说运维', '狂神说前端']
    5.        }
    6. })
    4 、将这些值 , 通过插槽插入 
    1. <div id="app">
    2.     <todo>
    3.        <todo-title slot="todo-title" title="秦老师系列课程">todo-title>
    4.        <todo-items slot="todo-items" v-for="(item, index) in todoItems"
    5.                     v-bind:item="item" v-bind:index="index">todo-items>
    6.     todo>
    7. div>
    说明 : 我们的 todo-title 和 todo-items 组件分别被分发到了 todo 组件的 todo-title 和 todo-items 插槽
    中
  • 相关阅读:
    Redis之缓存一致性
    stable diffusion模型训练时数据量
    Docker快速入门到项目部署，docker自定义镜像
    NIO- Handler业务处理器
    十大创新方向发布 悬镜安全强势领跑软件供应链安全与开发安全
    4603. 最大价值
    Ingress Controller
    低代码平台简单分享
    java 工程管理系统源码+项目说明+功能描述+前后端分离 + 二次开发
    java 算术运算符
  • 原文地址：https://blog.csdn.net/m0_53354306/article/details/127604750