如何使用 vue 3 从字符串中渲染组件？

Question

我正在尝试从字符串渲染组件，但没有成功。 我的代码如下

<template>
<div v-html="beautifyNotification(notification)"></div>
</template>

<script>
import { Link } from '@inertiajs/inertia-vue3'
import {compile,h} from "vue"

export default {
    components: {
    },
    props: {
        notifications: Object
    },
    methods: {
        beautifyNotification (ntfction) {
            return h(compile(`<Link :href="`+ntfction.from.username+`"
                    class="h6 notification-friend">`+ntfction.from.name+`
            </Link>, commented on your new
            <Link href="#" class="notification-link">profile status</Link>.`))
        },
    }
}
</script>

我尝试使用 h 渲染组件并进行编译，但它返回“对象对象”

Answer 1

您在这里使用了错误的 h function。 h() 返回要在 render() function 中使用的虚拟节点，而不是模板。 在这种情况下，您根本不需要 <template> 或 <v-html> ：

//no template element
<script>
import { Link } from '@inertiajs/inertia-vue3'
import {compile,h} from "vue"

export default {
    props: {
        notifications: Object
    },
    render() {
        return h(
           // abbreviated template string for brevity
           compile('<Link href="#" class="notification-link">profile status</Link>.')
        ) 
    }
}
</script>