今回はSlotについて

子コンポーネントで使う感じと覚えればいいと思う。
デフォルトを設定できるって感じですw

// 子コンポーネント
<template>
  <section>
    <h2>{{ props.name }}さんの状況</h2>
    <slot>
      <p>連絡がつきません</p>
    </slot>
  </section>
</template>

<script setup lang="ts">

interface names {
  name:String
}
const props = defineProps<names>()
</script>

// 親コンポーネント
<script setup lang="ts">
import　子コンポート名 from "子コンポート階層"
import { ref } from "vue";
</script>

<template>
// これはデフォルト設定でpタグの中身が入る
<子コンポート名 name="山田" />
// 下は子コンポーネントのslotの中身が書き換わる
<子コンポート名 name="高山">
<p>問題あり</p>
</子コンポート名>
</template>

---

感想

pタグなどhtmlのタグを直接ref()内で入れると、文字として吐き出しされるので
v-html属性をつける方法もあるが、XSS的に弱くなるのでslotを使って方がいいと言う事だとも言う。