vue slot插槽
2019-11-27 本文已影响0人
me_coder
作用及作用域
如果一个组件内没有包含一个<slot>元素,那么该组件标签开始和结束之间的任何内容会被抛弃;
父级模板里的所有内容都是在父级作用域中编译的;子模板里的所有内容都是在子作用域中编译的。
用法
如果想插入多个不同的slot到指定的位置,可以为每个插槽指定一个名字,如下所示:
<div class="container">
<header>
<slot name="header"></slot>
</header>
<main>
<slot></slot>
</main>
<footer>
<slot name="footer"></slot>
</footer>
</div>
注:一个不带 name 的 <slot> 出口会带有隐含的名字“default”。
然后使用v-slot指令,可以具体内容插入到指定的插槽,如下所示:
<base-layout>
<template v-slot:header>
<h1>Here might be a page title</h1>
</template>
<p>A paragraph for the main content.</p>
<p>And another one.</p>
<template v-slot:footer>
<p>Here's some contact info</p>
</template>
</base-layout>
而没有带v-slot指令的内容会被插入到默认的位置,即default的位置。
注意 v-slot 只能添加在 <template> 上 ,只有一种例外情况:当被提供的内容只有默认插槽时,如下:
<current-user>
<template v-slot:default="slotProps">
{{ slotProps.user.firstName }}
</template>
</current-user>
可以写成:
<current-user v-slot:default="slotProps">
{{ slotProps.user.firstName }}
</current-user>
v-slot:header 可以缩写为 #header,该缩写只在其有参数的时候才可用,即v-slot:default=" "不可写成#=" ",但可以写成#default=“ ”。