插槽

  1、作用:让父组件可以向子组件指定位置插入html结构,也是一种组件之间通信的方式,

                     适用于 父组件===>子组件。

  2、分类:默认插槽、具名插槽、作用域插槽

  3、使用方式:

      1、默认插槽: 

        父组件中:

            <Category>

              <div>html结构</div>

            </Category>

        子组件中:

            <template>

              <div>

                  //定义一个插槽

                  <slot>插槽默认内容</slot>

              </div>

            </template>


      2、具名插槽:

        父组件中:

          <Category>

            <template slot="center">       //当多个插槽时 选择该结构放入哪一个插槽

                 <div>html结构1</div>

            </template>

            <template v-slot:footer>    //当用到template时 在vue2.6中有新写法

                    <div>html结构2</div>

            </template>


//如果没有template。直接在结构上写slot=“center”

          </Category>

        子组件中:

            <template>

              <div>

                //定义插槽

                <slot name="center"></slot>

                <slot name="footer"></slot>

              </div>

            </template>

      3、作用域插槽

        1、理解:数据在组件的自身,但根据数据生成的结构需要组件的使用者来决定。(games数据在Category中,但使用数据所遍历出来的结构由

        App组件来决定)

        2、具体编码:

<slot :games="games"></slot>    //把数据传给插槽

//想要拿到插槽传入的games数据   必须用template标签

  接受数据 scope=“{games}” 

       新写法:slot-scope = “{games}”

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容