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

2022/9/19 4:17:12

本文主要是介绍【九月打卡】第14天 Vue3框架,对大家解决编程问题具有一定的参考价值,需要的程序猿们随着小编来一起学习吧!

课程名称: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插槽进行传递会变得简单很多,今天也是收获满满的一天,希望能够每天学习一点点,一直坚持下,加油!        



这篇关于【九月打卡】第14天 Vue3框架的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!


扫一扫关注最新编程教程