Vue 2.x 插槽

Question

插槽后备内容

SubmitButton.vue

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

使用时

<submit-button></submit-button> // Submit
<submit-button>Save</submit-button> // Save

具名插槽

Layout.vue

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

使用

<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:default>-->
  <!--    <p>A paragraph for the main content.</p>-->
  <!--    <p>And another one.</p>-->
  <!--  </template>-->
  <template v-slot:footer>
    <p>Here's some contact info</p>
  </template>
</layout>

向使用者传参

<footer>
  <slot name="footer" v-bind:user="userInData"></slot>
</footer>

// 使用者
<template v-slot:footer="aaa">
  <p>{{ aaa.user.firstName }}</p>
</template>
// 解构写法 const { user } = aaa
<template v-slot:footer="{ user }">
  <p>{{ user.firstName }}</p>
</template>
// 添加结构默认参数
<template v-slot:footer="{ user = { firstName: 'Guest' } }">
  <p>{{ user.firstName }}</p>
</template>

使用者不想使用 template 标签

条件： 只有一个默认插槽

<div v-slot:default="abcd">
  <p>A paragraph for the main content.</p>
  <p>And another one.</p>
</div>
// 或省略 default
<div v-slot="abcd">
  <p>A paragraph for the main content.</p>
  <p>And another one.</p>
</div>

使用者想简写， default 不能简写

<template #footer>
  <p>Here's some contact info</p>
</template>