vue.js - Vuejs 在方法内构建/渲染组件并输出到模板中

Question

我有一个带有组件名称的字符串(例如，因为它是一个具有许多键/值的对象，想要循环并附加到 htmloutput)。是否可以在方法内渲染/构建组件并显示 html 输出？

这可能吗？我该如何实现？

     <template>
         <div v-html="htmloutput"></div>
     </template>


<script>
    export default {
        component: {
            ComponentTest
        },
    data() {
            return {
                htmloutput: ''
            }
        },
    methods:{
        makeHtml(){
            let string = 'component-test';//ComponentTest
            //render the ComponentTest directly
            this.htmloutput = ===>'HERE TO RENDER/BUILD THE COMPONENTTEST'<==
        }
    },
    created(){
            this.makeHtml();
    }
</script>

Answer 1

您可能正在寻找动态组件:

https://v2.vuejs.org/v2/guide/components-dynamic-async.html

例子:

<template>
    <component :is="changeableComponent">
    </component>
</template>

<script>
    import FirstComponent from '@/views/first';
    import SecondComponent from '@/views/second';

    export default {
        components: {
            FirstComponent, SecondComponent
        },
        computed: {
            changeableComponent() {
                // Return 'first-component' or 'second-component' here which corresponds
                // to one of the 2 included components.
                return 'first-component';
            }
        }
    }
</script>