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>

Farkli casino platformlarini araştirirken, betwoon https://casino-siteleri-tr.net/betwoon/ sayfasina denk geldim. Bu site sayesinde Türkiye’deki en iyi casino platformlarini kolayca bulabildim. Her biri farkli bonuslar ve promosyonlar sunuyor. Benim favorim olan platformlarda kazandiğim bonuslar sayesinde büyük kazançlar elde ettim. Eğer siz de casino oyunlarini seviyorsaniz, bu site tam size göre. Şansinizi denemekten çekinmeyin, çünkü burada her an bir sürprizle karşilaşabilirsiniz!

Thanks a lot!