Vue で Prop → v-html で処理しているものを Slot → 別の何かで処理したい

Vue で子コンポーネントに値を渡すときって、 Prop か Slot を使うと思うのですが、Slot で渡された HTML 要素を改造してレンダリングするために、値を取得する方法が分からず、Prop で受け取って、v-html で HTML 要素を反映させているのですが、代替方法ってありますか?

今の処理は

vue

1<script setup lang="ts"> 2export interface Props { 3 text: string 4} 5const props = defineProps<Props>(); 6 7function generate(text: string) { 8 // HTML 要素の生成 9 return generated; 10} 11</script> 12 13<template> 14 <div v-html="generate(props.text)"></div> 15</template>

こんな感じなのですが、ユーザーが渡した情報に対して generate して v-html に与えたいので安全なのかどうかも良く分からないし、Prop じゃなくて Slot を使うべきなのではないかとも思いますが、良く分かりません。

コメントを投稿

0 コメント