实例 Vue 命名范围 Slots

<template>

  <h1>Named Scoped Slots</h1>

  <p>Named scoped slots "leftSlot" and "rightSlot" send different data to App.vue from the SlotComp.vue component.</p>

  <hr>

  <slot-comp #leftSlot="leftProps">

    <div>{{ leftProps.text }}</div>

  </slot-comp>

  <slot-comp #rightSlot="rightProps">

    <div>{{ rightProps.text }}</div>

  </slot-comp>

</template>

​

<script></script>

​

<style>

  #app {

    width: 300px;

  }

  #app > div {

    display: inline-block;

    background-color: lightgreen;

    width: 100px;

    padding: 10px;

    margin: 10px;

  }

</style>