Vue Slots Explained: Examples

FancyHome.vue

<!-- A really fancy home: -->
<template>
  <home-component>
    <template v-slot:living-room="livingRoomProps">
      <flatscreen-tv @view="livingRoomProps.watchTV"></flatscreen-tv>
      <universal-remote
        @changeChannelSports="livingRoomProps.changeChannel('SportsHD')"
        @changeChannelCartoons="livingRoomProps.changeChannel('CartoonsHD')"
       ></universal-remote>
    </template>

    <template v-slot:dining-room="diningRoomProps">
      <buzzer @buzz="diningRoomProps.eatTogether"></buzzer>
    </template>
  </home-component>
</template>

HomeComponent.vue

<template>
  <div class="home">
    <div class="living-room">
      <div class="TV"></div>
      <slot name="living-room" v-bind:watchTV="watchTV" v-bind:changeChannel="changeChannel"></slot>
    </div>

    <div class="dining-room">
      <slot name="dining-room" v-bind:eatTogether="eatTogether"></slot>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      tvChannel: "News",
    }
  }
  methods: {
    watchTV() {
      console.log("Now watching: ", this.tvChannel);
    },
    changeChannel(newChannel) {
      this.tvChannel = newChannel;
    },
    eatTogether() {
      console.log("Yummy!");
    }
  }
}
</script>

HouseComponent.vue

<template>
  <div class="house">
    <div class="living-room">
      <slot></slot>
    </div>
  </div>
</template>
.
.
.

HouseRoomsComponent.vue

<template>
	<div class="house">
		<div class="living-room">
			<slot></slot>
		</div>
		<div class="dining-room">
			<span class="chair"></span>
			<slot name="dining-room"></slot>
			<span class="chair"></span>
		</div>
	</div>
</template>

<!-- When used: -->
<template>
	<house-component>
		<span class="scott"></span>
		<div class="sofa>
			<span class="wes"></span>
		</div>

		<template v-slot:dining-room>
			<span id="chubbs"></span>
                        <span class="food"></span>
		</template>
	</house-component>
</template>

OccupiedHome.vue

<template>
  <home-component>
    <template v-slot:living-room="livingRoomProps">
      <button @click="livingRoomProps.changeChannel('News')">
        Change to news
      </button>
      <button @click="livingRoomProps.changeChannel('Sports')">
        Change to Sports
      </button>

      <button @click="livingRoomProps.watchTV">
        Watch TV
      </button>
    </template>

    <template v-slot:dining-room="diningRoomProps">
      <button class="dinner-bell" @click="diningRoomProps.eatTogether">
        Ring the bell!
      </button>
    </template>
  </home-component>
</template>

OccupiedHouse.html

<div class="house">
    <div class="living-room">
      <span class="scott"></span>
      <div class="sofa">
	<span class="wes"></span>
      </div>
    </div>

    <div class="dining-room">
      <span class="chair"></span>
      <span id="chubbs"></span>
      <span class="food"></span>
      <span class="chair"></span>
    </div>
</div>

VillageComponent.vue

<template>
  <div class="village">
    <house-component>
      <span id="evan"></span>
    </house-component>
    <house-component>
      <span id="ali"></span>
    </house-component>
  </div>
</template>


<!-- This will render: -->

<div class="village">
  <div class="house">
    <div class="living-room">
      <span id="evan"></span>
    </div>
  </div>

  <div class="house">
    <div class="living-room">
      <span id="ali"></span>
    </div>
  </div>
</div>