slot 插槽

【插槽内容】
我理解的slot的作用是,父组件可以把一段dom或者是一个组件放到这个子组件的固定地方,slot相当于在子组件中占了一个位置,如果父组件放东西就会放到那个地方。

例如,父组件引用子组件如下:

 <children>
    这里是要添加到slot的内容
  </children>

子组件如下:

<template>
  <a v-bind:href="url">
      <slot></slot>
  </a> 
</template>

结果是:

<a v-bind:href="url">
      这里是要添加到slot的内容
</a> 

插槽内可以包含任何模板代码,包括 HTML,或者其他组件。

【后备内容】
有时为一个插槽设置具体的后备 (也就是默认的) 内容是很有用的,它只会在没有提供内容的时候被渲染。例如在一个 <submit-button> 组件中:

<button type="submit">
  <slot></slot>
</button>    

我们可能希望这个 <button> 内绝大多数情况下都渲染文本“Submit”。为了将“Submit”作为后备内容,我们可以将它放在 <slot> 标签内:

<button type="submit">
  <slot>Submit</slot>
</button>

现在当我在一个父级组件中使用 <submit-button> 并且不提供任何插槽内容时:
<submit-button></submit-button>
后备内容“Submit”将会被渲染:
<button type="submit">
Submit
</button>
但是如果我们提供内容:
<submit-button>
Save
</submit-button>
则这个提供的内容将会被渲染从而取代后备内容:
<button type="submit">
Save
</button>

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