• 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 插槽
    中
  • 相关阅读:
    设计模式-生成器模式
    xml mysql 强制走区分大小写查询
    盲人盲杖：科技革新，助力视障人士独立出行
    Redis集群选举原理与脑裂问题
    Kotlin（九）类、属性、构造函数
    Linux下jar包的运行、查看、终止
    2022 APMCM亚太数学建模竞赛 C题 全球是否变暖 思路及代码实现(持续更新中)
    05. 机器学习入门 - 动态规划
    行业追踪，2023-10-12
    [构造]Complementary XOR Codeforces1750C
  • 原文地址：https://blog.csdn.net/m0_53354306/article/details/127604750