插槽slot使用方法

Posted 2021-03-06 xf2764

<slot>为vue的内置标签：用于给组件定义一个插槽，在这个插槽里传入内容（可以是模板代码或者组件），达到动态改变组件的目的。

v-slot指令：绑定内容到指定插槽，v-slot 只能添加在一个 <template> 上

给插槽设置默认内容，在没有提供内容的时候被渲染

 

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

<div class="container">
<header>
<slot name="header"></slot>
</header>
<main>
<slot></slot>//默认插槽，不带 name 的 <slot> 出口会带有隐含的名字“default”。
</main>
<footer>
<slot name="footer"></slot>
</footer>
</div>