手记

【九月打卡】第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>


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

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

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

          <template v-slot:F>

            <div>footer</div>

          </template>

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



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

1人推荐
随时随地看视频
慕课网APP