【九月打卡】第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插槽进行传递会变得简单很多,今天也是收获满满的一天，希望能够每天学习一点点,一直坚持下，加油!