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 コメント