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

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

2022.09.18 15:57 143浏览

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

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

主讲老师:Dell

课程内容:

今天学习的内容包括:

  • slot 插槽

  • templat

  • 具名插槽v-slot:F

  • 编程练习

课程收获:


slot 插槽

    1)放在调用子组件内部的东西 , 

    2)插槽内可以包含任何模板代码,包括 HTML、甚至其它的组件

    3)如果子组件的 template 中没有包含一个 <slot> 元素,则该组件起始标签和结束标签之间的任何内容都会被抛弃。

    4)slot插槽是不能绑定事件的,如果需要绑定事件可以在slot的外层加个<span>标签进行事件绑定。


    示例中 mysection(子组件) 标签中的

        <mysection> 

            <button> 提交 </button> 

        </mysection>就是要插在子组件中的东西

 <script>

    // slot 插槽

    // 父模板里面调用的数据属性,使用的都是父模板里的数据

    // 子模板里面调用的数据属性,使用的都是子模板里的数据

    const app = Vue.createApp({

      data() {

        return {

          text: '提交'

        }

      },

      template: `

        <mysection>

          <div>{{text}}</div>

        </mysection>

        <mysection>

          <button>{{text}}</button>

        </mysection>

      `

    })


    app.component('mysection', {

      data() {

        return {

          text: '我是子模版里的text'

        }

      },

      methods: {

        handleClick() {

          alert('111');

        }

      },

      template: `

        <div>

          {{text}}

          <input />

          <span @click="handleClick">

            <slot></slot>

            <slot></slot>

          </span>

        </div>

      `

    })


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

  </script>


https://img2.sycdn.imooc.com/6326c38d000159f907390736.jpg

如果插槽不传值可以写一个默认值

https://img4.sycdn.imooc.com/6326c4ab00013a8207670254.jpg

https://img2.sycdn.imooc.com/6326c526000124cc04920522.jpg

具名插槽: 将一个slot拆成多个具名插槽,使标签、dom的传递更加灵活

具名插槽slot :可以拆分两个 slot, 分别放在template 占位符里面,

          <template v-slot:F>

            <div>footer</div>

          </template>

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

https://img4.sycdn.imooc.com/6326ce4200017e2c04740520.jpg



          今天学习了slot插槽和具名插槽,在使用dom、标签的传递时,使用slot插槽进行传递会变得简单很多,今天也是收获满满的一天,希望能够每天学习一点点,一直坚持下,加油!        

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

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

评论

作者其他优质文章

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

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

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

风间影月说签约讲师

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

进入讨论

Tony Bai 说签约讲师

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

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

举报

0/150
提交
取消