为了账号安全,请及时绑定邮箱和手机立即绑定
首页 手记 【九月打卡】第15天 Vue3框架

【九月打卡】第15天 Vue3框架

2022.09.19 18:32 37浏览

课程名称: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> -->

https://img1.sycdn.imooc.com/632826580001749a10380605.jpg

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

点击查看更多内容
1人点赞

若觉得本文不错,就分享一下吧!

评论

作者其他优质文章

正在加载中
Web前端工程师
手记
粉丝
9
获赞与收藏
34

关注TA,一起探索更多经验知识

同主题相似文章浏览排行榜

风间影月说签约讲师

50篇手记,涉及Java、MySQL、Redis、Spring等方向

进入讨论

Tony Bai 说签约讲师

146篇手记,涉及Go、C、Java、Python等方向

进入讨论
感谢您的支持,我会继续努力的~
扫码打赏,你说多少就多少
赞赏金额会直接到老师账户
支付方式
打开微信扫一扫,即可进行扫码打赏哦
意见反馈 帮助中心 APP下载
官方微信

举报

0/150
提交
取消