html - Vue.js：在子组件的插槽中动态呈现 html

Question

在我的 vue.js 应用程序中，我试图html在子组件的插槽中动态呈现内容。如果我只输入文本就没有问题，它可以正常工作。

这是我的代码：

子组件.vue

<template>
    <div :class="type" class="message" v-if="type">
        <slot />
    </div>
</template>

<script>
export default {
    ...
    props: ['type'],
    ...
}
</script>

父组件.vue

<script>
import Alert from '@/Alert';

export default {
    components: {
        Alert,
    },
    data() {
        return {
            ...
            alert: {
                error: '',
                message: '',
            }
        };
    },
    created () {
        this._onLoad()
    },
    methods: {
        _onLoad() {
            axios.get(`api.call.here`).then((res) => {
                ...
            }).catch(error => {
                this.alert.error = error.type;
                this.alert.message = `<p>message here</p>`; // from response
            });
        },
    }
}
</script>

这是问题的屏幕截图：

标签： htmlvue.jstextrender

Answer 1

您尝试做的事情可以通过v-html. 您可以在调用ChildComponent.vue. 这是您的案例的一个小示例：

<Alert>
   <span v-html="alert.message"></span>
</Alert>