[Vue.js] スコープ付きslotの記述方法

子コンポーネント側

子コンポーネント側では、<slot>タグに対してv-bindを行います。

<template>
  <div>
    <slot :hoge="hoge">
  </div>
</template>

<script>
export default {
  name: 'Child',
  data () {
    return {
      hoge: 'hoge',
    }
  }
}
</script>

親コンポーネント側

親コンポーネント側では<v-slot:default>で受け取ることで、子コンポーネントのの値をとることができます。
slotPropsは任意ですので重複がなければ、どんな文字列でも構いません。

<template>
  <div>
    <Child v-slot:default="slotProps">
      {{ slotProps.hoge }}
    </Child>
  </div>
</template>

<script>
import MyCom from '../components/Child.vue'
export default {
  name: 'parent',
  components: {
    Child
  }
}
</script>