Vue.js の vm.$scopedSlots により slot 内部要素から値を受け取る

Vue.js の .$scopedSlots により slot 内部要素から値を受け取る

vm.$scopedSlots を使用することで SSR の結果より値を受け取る際に使えるかも・・・？しれません。

実装例

使用する slot 持ちコンポーネント

slot を持ち親コンポーネントに vm.$scopedSlot の実行結果を .$emit() するコンポーネントです。
vm.$scopedSlot の結果は VNode インターフェース の型で返ります。

slot-data.vue

<template>
  <div class="slot-data">
    <slot/>
  </div>
</template>

<script>
export default {
  mounted() {
    this.$scopedSlots['default']()
      .forEach(vn => {
        if (vn.data) {
          this.$emit('slot-data', vn.data)
        }      
      });
  },
};
</script>

親コンポーネントにおいて下記のように @slot-data として受け取ります。

App.vue

<template>
  <div id="app">
    <img width="10%" src="./assets/logo.png">
    <SlotData @slot-data="slotData">
      <input name="abc" value="1">
      <input name="def" value="taro">
    </SlotData>
  </div>
</template>

<script>
import SlotData from "./components/SlotData";

export default {
  name: "App",
  components: {
    SlotData
  },
  methods: {
    slotData(data) {
      console.log(data);
    }
  }
};
</script>

親コンポーネントは slotData により 受け取った data より
取得したいデータをそれぞれ処理するような形です。

もっといい方法はありそうですが・・・