vue slot插槽

2020-08-03  本文已影响0人  橙小光

v-slot 插槽的用法:

单个slot内容时:

子组件:

<slot></slot>

父组件:

<navigation-link>
  Logged in as user
</navigation-link>

多个slot内容时(具名插槽):

子组件:

<div class="container">
  <header>
    <slot name="header"></slot>
  </header>
  <main>
    <slot></slot>
  </main>
  <footer>
    <slot name="footer"></slot>
  </footer>
</div>

父组件:

<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>

上一篇 下一篇

猜你喜欢

热点阅读