vue 中怎么渲染字符串形式的组件标签?

<div id="app">
    <el-form v-model="form" label-width="100px" class="process-edit-form">
        <el-form-item v-for="item in formParams" :label="item.name + '：'">
            <!-- 这里取 item.html并渲染-->
        </el-form-item>
    </el-form>
</div>

var app = new Vue({
    el: "#app",
    data: {
        button: '<el-button type="primary">按钮</el-button>',
        form: {
            name: '',
            age: ''
        },
        formParams: [
            {name: '名称', type: 'name', html: '<el-input v-model.trim="form.name"></el-input>'},
            {name: '年龄', type: 'age', html: '<el-input v-model.trim="form.age"></el-input>'},
        ]
    },
    mounted() {
        this.$nextTick(function () {
            this.$forceUpdate();
        })
    }
})

因为我这个要根据后台返回的数据来动态渲染组件，传给我一个这样字符串的话，用什么样的方式可以实现？
用v-html渲染的是这个标签，而不是组件。

阅读 15.2k

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <!-- 引入样式 -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
</head>

<body>
    <div id="app">
        <el-form v-model="form" label-width="100px" class="process-edit-form">
            <el-form-item v-for="item in formParams" :key="item.name" :label="item.name + '：'">
                <com1 :html="item.html" :form="form"></com1>
                <!-- 这里取 item.html并渲染-->
            </el-form-item>
        </el-form>
        {{ form }}
    </div>
</body>
<!-- 先引入 Vue -->
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<!-- 引入组件库 -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<script>
    Vue.component('com1', {
        props: {
            html: String,
            form: Object,
        },
        render(h) {
            const com = Vue.extend({
                template: this.html,
                props: {
                    form: Object,
                }
            })

            return h(com, {
                props: {
                    form: this.form
                }
            })
        }
    })

    var app = new Vue({
        el: "#app",
        data: {
            button: '<el-button type="primary">按钮</el-button>',
            form: {
                name: '',
                age: ''
            },
            formParams: [{
                    name: '名称',
                    type: 'name',
                    html: '<el-input v-model.trim="form.name"></el-input>'
                },
                {
                    name: '年龄',
                    type: 'age',
                    html: '<el-input v-model.trim="form.age"></el-input>'
                },
            ]
        },
        mounted() {
            this.$nextTick(function () {
                this.$forceUpdate();
            })
        }
    })
</script>

</html>

vue 中怎么渲染字符串形式的组件标签?

你尚未登录，登录后可以

不同页面之间可以通过localstorage保存响应式吗？

网站的不同域名互相跳转如何保持登录态？

Vue项目一个报错无法找到原因?

相同的HTML代码，用v-html与直接写在模板中染相表现差异巨大，如何规避？

vite项目如何导入.pem公钥更规范？

移动端切换路由后返回，视频启动播放会严重滞后，好怪？

请问前端小票打印各位是怎么做的？