课程名称：2022持续升级 Vue3 从入门到实战 掌握完整知识体系

课程章节：第3章 探索组件的理念

主讲老师：Dell

课程内容：

今天学习的内容包括：

• 作用域插槽

• #插槽名

• Es6解构语法

• itemProps
  

• 编程练习
  

课程收获：

具名插槽的简写方法  在template标签中

v-slot:插槽名  ==>  #插槽名

<template  v-slot:header>

        <div>header</div>

</template>

<template  #header>

        <div>header</div>

</template>

作用域插槽：父组件调子组件的时候传slot进来，子组件再通过属性的形式，把数据传给子组件，父组件拿到内容时再显示

其中v-slot=‘itemProps’可以用解构语法简写 v-slot=‘{item}’

当子组件渲染的内容要由父组件决定的时候，可以使用作用域插槽，可以把父组件的item数据从子组件传递过来，父组件从理论上就可以调用子组件的数据

编程练习代码

<script>

    const app = Vue.createApp({

      data() {

        return {

        }

      },

      template: // Es6解构语法 <a-list v-slot="{item}">  <span>{{item}}</span>

        // 子组件渲染的内容由父组件决定的时候,例如说如何展示这个列表,可以使用作用域的插槽来实现(可以通过父组件来调用子组件中的数据)

      `

        <a-list v-slot="slotProps">

            <div>{{slotProps.item}}</div>

        </a-list>

      `

    })

    app.component('a-list', {

      data() {

        return {

          list: [1,2,3]

        }

      },

      template: `

      <div>

        <slot v-for="item in list" :item="item"></slot>

      </div>

      `

    })

    const vm = app.mount('#root');

  </script>

<!-- <script>

    const app = Vue.createApp({

      data() {

        return {

        }

      },

      template: `

        <a-list>

          <template v-slot:B>

            <span>11111111111</span>

          </template>

          <template v-slot:F>

            <span>2222222222222</span>

          </template>

        </a-list>

      `

    })

    app.component('a-list', {

      data() {

        return {

         

        }

      },

      template: `

        <slot name="B"></slot>

        <br />

        <slot name="F"></slot>

      `

    })

    const vm = app.mount('#root');

  </script> -->

          今天学习了作用域插槽,具名插槽的简写,子组件渲染的内容由父组件决定的时候,例如说如何展示这个列表,可以使用作用域的插槽来实现会变得简单很多,今天也是收获满满的一天，希望能够每天学习一点点,一直坚持下，加油!