<slot>插槽： 可指定包含组件内部位置的哪些内容

插槽内容： 

更多内容详见：<slot>插槽详细用法

当组件渲染的时候，这个 <slot> 元素将会被替换为“Your Profile”。

 

 

具名插槽：可使用于<template>元素或普通 html 元素

作用：<slot> 元素中使用 "name" 属性，区分多个插槽，便于同时使用多个插槽。

html 代码：

1. 在父组件的 <template > 元素使用 slot 特性：

（<template> 是一个包裹元素（组件里使用）。该元素里面可以包含多个普通 html 元素（子元素），用于集体控制多个子元素） 

<template slot="header">

组件模板代码：

2.另一种 slot 特性的用法是直接用在一个普通的元素上：

组件模板代码：

 

上述两种方法示例渲染出来的 HTML 都将会是：

html 最后渲染的内容：

（以上两种方法解析：

第一种：<template slot="header"> 会匹配 <slot name="header"></header>

第二种：<h1 slot="header"> 会匹配 <slot name="header"></header>

中间部分，<main><slot> </slot> </main>，这里的未具名<slot> </slot>元素，将会匹配其他未匹配的内容：

<p>A paragraph for the main content.</p>

<p>And another one.</p>）

3. 我们还是可以保留一个未命名插槽，这个插槽是默认插槽 （以上例子的 <main><slot> </slot> </main> 这里的 <slot></slot>）

也就是说它会作为所有未匹配到插槽的内容的统一出口。