概要

コンポーネント内の子要素のテキストを取得する方法について。
方法にはTemplate RefsとSlotsを使った2パターンがあります。

Template Refs

// App.vue
<script setup lang="ts">
</script>
<template>
  <MyComponent>
    hello, world!
  </MyComponent>
</template>

// MyComponent.vue
<script setup lang="ts">
import { ref } from 'vue';
const el = ref<HTMLElement|null>(null);
</script>
<template>
  <div ref="el">
    <!-- 子要素のテキストが表示される -->
    {{ el?.textContent }}
  </div>
</template>

Slots

// MyComponent.vue
<script setup lang="ts">
</script>
<template>
  <div>
    <!-- 子要素のテキストが表示される -->
    {{ $slots.default?.()[0].children }}
  </div>
</template>