一、插槽的作用
1、插槽在template属性模版之中设置,假设有个<navigation-link"></navigation-link>模版,可在其中设置插槽<slot></slot>;
2、在html文档中,凡是在<navigation-link"></navigation-link>标签内的代码(元素、字符串),将被看做插槽的内容。

二、具名插槽
1、<slot> 元素有一个特殊的特性:name。这个特性可以用来定义额外的插槽:

//模版
<div class="container">
  <header>
    <slot name="header"></slot>
  </header>
  <main>
    <slot></slot>
  </main>
  <footer>
    <slot name="footer"></slot>
  </footer>
</div>
//html代码
<navigation-link>
 <p>A paragraph for the main content.</p>
 
  <template slot="header">
    <h1>Here might be a page title</h1>
  </template>
  
  <p>And another one.</p>
  
  <template slot="footer">
    <p>Here's some contact info</p>
  </template>
</navigation-link>

html文档中的两个<p>将被放置在main中的slot里面,由于没有指明p的所属solt,p将会被全部归结到main中的slot中。
如果在template中给main中的solt赋予个name="main"属性,那么p将被忽略,除非将两个p放入<template slot="main">中。

Logo

前往低代码交流专区

更多推荐