【Nuxt.js】slot文法編: スコープ付きスロットを使おう

前置き

スコープ付きスロットのご紹介💫

子から親へデータを渡すことができます✨
基本的にはVuexを使えば良いのですが、
「Vuexを使うほどではないけど
　まとまったdataを子で管理したい！」
そんな時に使います。
公式: スコープ付きスロット

やりたいことイメージするために、
まずはコードを見てもらいましょう👀

⬇️子コンポーネントでdataを管理

<template>
  <div class="slot-item">
    <slot>{{ userData }}</slot>
  </div>
</template>

<script>
export default {
  data () {
    return {
      userData: {
        firstName: 'first',
        lastName: 'last',
        email: '12345@aliz.com',
      },
    }
  },
}
</script>

<slot>{{ userData }}</slot>

</div>

</template>

export default {

data () {

return {

userData: {

firstName: 'first',

lastName: 'last',

email: '12345@aliz.com',

}

</script>

⬇️親でdataにアクセスしたい❗️

<template>
  <div class="page">
    <SlotItem>
      {{ userData.firstName }}
    </SlotItem>
  </div>
</template>

<script>
export default { }
</script>

</SlotItem>

</div>

</template>

export default { }

</script>

実際にはこのコードでは動きません💥✋
ただスコープ付きslotにすることで
それが可能になります💫

⬇️以前も簡単に解説していますが、
　今回はもう少し踏み込みます👣
【Nuxt.js】Nuxt文法編：v-slot(中級)

参考:
Vue.jsのslotの機能を初心者にわかるように解説してみた

スコープ付きスロット

デフォルト(名前なしslot)

slotにv-bindし…

<template>
  <div class="slot-item">
    <slot v-bind:user="userData" />
  </div>
</template>

<script>
export default {
  data () {
    return {
      userData: {
        firstName: 'first',
        lastName: 'last',
        email: '12345@aliz.com',
      },
    }
  },
}
</script>

</div>

</template>

export default {

data () {

return {

userData: {

firstName: 'first',

lastName: 'last',

email: '12345@aliz.com',

}

</script>

nameがない=defaultのため
defaultをsampleという変数にしています。
これで子コンポーネントのdataを
呼び出すことが可能です🌟

<template>
  <div class="page">
    <SlotItem>
      <template #default="sample">
        {{ sample.user.email }}
      </template>
    </SlotItem>
  </div>
</template>

<script>
export default { }
</script>

</template>

</SlotItem>

</div>

</template>

export default { }

</script>

表示は
12345@aliz.com
となります。

複数のスロットを使う場合

slotを複数使う場合は
名前付きスロットを使う必要があります。
基本的には全てのslotにnameをつけますが、
今回は上のコードで使ったdefaultを
分かりやすく残しています🍪

<template>
  <div class="slot-item">
    <slot v-bind:user="userData" />
    <slot v-bind:loves="loves" name="loves" />
  </div>
</template>

<script>
export default {
  data () {
    return {
      userData: {
        firstName: 'first',
        lastName: 'last',
        email: '12345@aliz.com',
      },
      loves: {
        food: 'apple',
        drink: 'cider',
      },
    }
  },
}
</script>

</div>

</template>

export default {

data () {

return {

userData: {

firstName: 'first',

lastName: 'last',

email: '12345@aliz.com',

loves: {

food: 'apple',

drink: 'cider',

}

</script>

<template>
  <div class="page">
    <SlotItem>
      <template #default="sample">
        {{ sample.user.email }}
      </template>
      <template #loves="other">
        {{ other.loves.drink }}
      </template>
    </SlotItem>
  </div>
</template>

<script>
export default { }
</script>

</template>

</template>

</SlotItem>

</div>

</template>

export default { }

</script>

表示は
12345@aliz.com cider
となります。

スロットプロパティの分割代入

slotが1つの場合は
templateで#defaultに名前を指定しなくても
コンポーネントで指定をすることができます。

まぁコードを見た方が早いです👀

<template>
  <div class="slot-item">
    <slot v-bind:user="userData" />
  </div>
</template>

<script>
export default {
  data () {
    return {
      userData: {
        firstName: 'first',
        lastName: 'last',
        email: '12345@aliz.com',
      },
    }
  },
}
</script>

</div>

</template>

export default {

data () {

return {

userData: {

firstName: 'first',

lastName: 'last',

email: '12345@aliz.com',

}

</script>

SlotItemコンポーネントにv-slot
バインドされたuserをそのまま使用

<template>
  <div class="page">
    <SlotItem v-slot="{ user }">
      {{ user.firstName }}
    </SlotItem>
  </div>
</template>

<script>
export default { }
</script>

</SlotItem>

</div>

</template>

export default { }

</script>

もしくは別の変数に変換することも可能です💡

<template>
  <div class="page">
    <SlotItem v-slot="{ user: person }">
      {{ person.firstName }}
    </SlotItem>
  </div>
</template>

<script>
export default { }
</script>

</SlotItem>

</div>

</template>

export default { }

</script>

表示は
first
となります。

まとめ

いくつもの親で
何回も同じようなdataを入れ込むより
子のdataを使った方が早い！！
という時には便利ですね✨