vue插槽

插槽，名词理解：在组件嵌套标签中使用，在原组件上放置标识标签（通俗来说就是挖坑标记标识）；在使用组件上通过属性将实际与标识标签连接，指引实际标签放置在原组件的相对位置（通俗来说就是在标识位置填坑）

用法：

原组件：

<div class="container">

<header>

<slot name="header"></slot>  //<slot name="header"></slot>为标识标签，说明header的标准放置在这里

</header>

<main>

<slot name="main"></slot> //<slot name="main"></slot>为标识标签，说明header的标准放置在这里

</main>

<footer>

<slot name="footer"></slot>  //<slot name="footer"></slot>为标识标签，说明header的标准放置在这里

</footer> </div>

使用组件：

<base-layout>  //<base-layout>为组件名（自定义的）

<template slot="header">  //slot="header"，将template 标签所包裹的标签放置到原组件<slot name="header"></slot>的位置上

<h1>Here might be a page title</h1>

</template>

<p slot="main">A paragraph for the main content.</p>

<p slot="main">And another one.</p>   //slot="main"，将template 标签所包裹的标签放置到原组件<slot name="main"></slot>的位置上

<template slot="footer">   //slot="footer"，将template 标签所包裹的标签放置到原组件<slot name="footer"></slot>的位置上

<p>Here's some contact info</p>

</template>

</base-layout>

补充：

1.当使用<template></template>包裹标签时。可使用 v-slot:x(名字)代替slot="x"（名字）如下：

<template  v-slot:x>

········

</template>

2.插槽数据传递，原组件传数据给组件使用者：

在原组件上添加属性如：

<slot name="main" :x="y"></slot>  //x为数据标识名，y为数据或者变量。

在组件使用者上添加属性如下：

<template scope="X">

········

</template>  

注意：1.X(X为自定义名字)；2.该用法只能在<template></template>  上使用；3.数据使用方式为：X.x(x为数据标识名)