Vue <slot> 元素

实例

使用内置的 <slot> 元素将父组件的内容放置在子组件的 <template> 中。

<template>
  <div>
    <p>SlotComp.vue</p>
    <slot></slot>
  </div>
</template>

定义与用法

内置的 <slot> 元素用于放置从父组件接收的内容。

当调用子组件时，在开始标记和结束标记之间提供的内容将终止于 <slot> 元素位于该子组件内的位置。

一个组件可以容纳多个 <slot>，并且这些 <slot> 可以用名称 prop 命名。对于具有不同命名 slot 的此类组件，我们可以使用 v-slot 指令将内容发送到特定 slot。（实例3）如果父级未提供任何内容，则 <slot> 元素的开始标记和结束标记之间的内容将用作回退内容。（实例5）信息可以通过 <slot> prop 提供给父元素。（实例8）<slot> 元素只是内容的占位符，<slot> 元素本身并没有呈现为 DOM 元素。

Props

更多实例

实例 1

使用 slot 来包装较大的动态 HTML 内容块，以获得类似卡片的外观。

App.vue:

<template>
  <h3>Slots in Vue</h3>
  <p>We create card-like div boxes from the foods array.</p>
  <div id="wrapper">
    <slot-comp v-for="x in foods">
      <img v-bind:src="x.url">
      <h4>{{x.name}}</h4>
      <p>{{x.desc}}</p>
    </slot-comp>
  </div>
</template>

当内容进入 <slot> 所在的组件时，我们在 <slot> 周围使用 div，并在本地设置 <div> 的样式，以在不影响应用程序中其他 div 的情况下，在内容周围创建类似卡片的外观。

SlotComp.vue:

<template>
  <div> <!-- This div makes the card-like appearance -->
    <slot></slot>
  </div>
</template>
<script></script>
<style scoped>
  div {
    box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
    border-radius: 10px;
    margin: 10px;
  }
</style>

实例 2

使用 slot 创建页脚。

App.vue:

<template>
  <h3>Reusable Slot Cards</h3>
  <p>We create card-like div boxes from the foods array.</p>
  <p>We also create a card-like footer by reusing the same component.</p>
  <div id="wrapper">
    <slot-comp v-for="x in foods">
      <img v-bind:src="x.url">
      <h4>{{x.name}}</h4>
    </slot-comp>
  </div>
  <footer>
    <slot-comp>
      <h4>Footer</h4>
    </slot-comp>
  </footer>
</template>

实例 3

使用 slot 名称，可以将内容发送到特定 slot。

SlotComp.vue:

<h3>Component</h3>
<div>
  <slot name="topSlot"></slot>
</div>
<div>
  <slot name="bottomSlot"></slot>
</div>

App.vue:

<h1>App.vue</h1>
<p>The component has two div tags with one slot in each.</p>
<slot-comp v-slot:bottomSlot>'Hello!'</slot-comp>

实例 4

在一个组件中有两个 slot 的情况下，发送到该组件的内容将同时出现在这两个 slot 中。

App.vue:

<h1>App.vue</h1>
<p>The component has two div tags with one slot in each.</p>
<slot-comp>'Hello!'</slot-comp>

SlotComp.vue:

<h3>Component</h3>
<div>
  <slot></slot>
</div>
<div>
  <slot></slot>
</div>

实例 5

在 slot 中使用回退内容，以便在父级未提供内容时呈现某些内容。

App.vue:

<template>
  <h3>Slots Fallback Content</h3>
  <p>A component without content provided can have fallback content in the slot tag.</p>
  <slot-comp>
    <!-- Empty -->
  </slot-comp>
  <slot-comp>
    <h4>This content is provided from App.vue</h4>
  </slot-comp>
</template>

SlotComp.vue:

<template>
  <div>
    <slot>
      <h4>This is fallback content</h4>
    </slot>
  </div>
</template>

实例 6

没有名称的 slot 将是父级内容的默认 slot。

SlotComp.vue:

<h3>Component</h3>
<div>
  <slot></slot>
</div>
<div>
  <slot name="bottomSlot"></slot>
</div>

App.vue:

<h1>App.vue</h1>
<p>The component has two div tags with one slot in each.</p>
<slot-comp>'Hello!'</slot-comp>

实例 7

使用 v-slot:default 以明确地将 slot 定义为默认 slot。

SlotComp.vue:

<h3>Component</h3>
<div>
  <slot></slot>
</div>
<div>
  <slot name="bottomSlot"></slot>
</div>

App.vue:

<h1>App.vue</h1>
<p>The component has two div tags with one slot in each.</p>
<slot-comp v-slot:default>'Default slot'</slot-comp>

实例 8

范围 slot: 使用 slot 中的 'foodName' prop 将食物名称传达给父级。

SlotComp.vue:

<template>
  <slot
    v-for="x in foods"
    :key="x"
    :foodName="x"
  ></slot>
</template>
<script>
  export default {
    data() {
      return {
        foods: ['Apple','Pizza','Rice','Fish','Cake']
      }
    }
  }
</script>

App.vue:

<slot-comp v-slot="food">
  <h2>{{ food.foodName }}</h2>
</slot-comp>

实例 9

范围 slot：使用 slot 中的 prop，基于带有对象的数组，将一些东西传达给父对象。

SlotComp.vue:

<template>
  <slot
    v-for="x in foods"
    :key="x.name"
    :foodName="x.name"
    :foodDesc="x.desc"
    :foodUrl="x.url"
  ></slot>
</template>
<script>
  export default {
    data() {
      return {
        foods: [
          { name: 'Apple', desc: 'Apples are a type of fruit that grow on trees.', url: 'img_apple.svg' },
          { name: 'Pizza', desc: 'Pizza has a bread base with tomato sauce, cheese, and toppings on top.', url: 'img_pizza.svg' },
          { name: 'Rice', desc: 'Rice is a type of grain that people like to eat.', url: 'img_rice.svg' },
          { name: 'Fish', desc: 'Fish is an animal that lives in water.', url: 'img_fish.svg' },
          { name: 'Cake', desc: 'Cake is something sweet that tastes good but is not considered healthy.', url: 'img_cake.svg' }
       ]
      }
    }
  }
</script>

App.vue:

<slot-comp v-slot="food">
  <hr>
  <h2>{{ food.foodName }}<img :src=food.foodUrl></h2>
  <p>{{ food.foodDesc }}</p>
</slot-comp>

实例 10

使用命名范围的 slot 将一个文本放入 "leftSlot"，另一个文本则放入 "rightSlot"。

SlotComp.vue:

<template>
  <slot
    name="leftSlot"
    :text="leftText"
  ></slot>
  <slot
    name="rightSlot"
    :text="rightText"
  ></slot>
</template>
<script>
  export default {
    data() {
      return {
        leftText: 'This text belongs to the LEFT slot.',
        rightText: 'This text belongs to the RIGHT slot.'
      }
    }
  }
</script>

App.vue:

<slot-comp #leftSlot="leftProps">
  <div>{{ leftProps.text }}</div>
</slot-comp>
<slot-comp #rightSlot="rightProps">
  <div>{{ rightProps.text }}</div>
</slot-comp>