在vue中如果要渲染字符串形式的标签，vue 提供了 v-html 指令，可以很方便的渲染出来。但是如果这个标签是一个组件，或者element-ui 的组件时，就不能解析出来了，因为v-html 只能解析原生的属性。

那么就要使用jsx渲染来解析

<!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>

当然在开发过程中肯定不会像上面那么些，将采用以下方法：

<template>

    <div :class="$options.name">

        <cmp :html="el"></cmp>

    </div>

</template>

<script>

import Vue from 'vue';

import AudioPlay from '@/components/media/audioPlay';

Vue.component('audio-play', AudioPlay);

export default {

    name: 'audio',

    data() {

        return {

            el: '<div><audio-play></audio-play><p>hello world</p></div>'

        };

    },

    components: {

        cmp: {

            props: {

                html: String

            },

            render(h) {

                const com = Vue.extend({

                    template: this.html

                })

                return h(com, {})

            }

        }

      },

};

</script>

<style lang="sass" scoped>

</style>

参考社区回答  https://segmentfault.com/q/1010000015734369

Vue 中渲染字符串形式的组件标签的更多相关文章

  1. C语言中以字符串形式输出枚举变量

    C语言中以字符串形式输出枚举变量 摘自:https://blog.csdn.net/haifeilang/article/details/41079255 2014年11月13日 15:17:20 h ...

  2. 在vue中使用Element的message组件

    在vue中使用Element的message组件 在vue文件中使用 this.$message({ message: "提示信息", type: "success&qu ...

  3. Vue中利用$emit实现子组件向父组件通信

    Vue中利用$emit实现子组件向父组件通信 父组件 <template> <div> <p>我是父组件</p> <child :isShow=& ...

  4. router-view组件在app.vue中渲染不出来怎么办

    1.在app.vue使用router-view组件直接渲染 页面什么都没显示,可能问题出在路由配置上了,检查路由是否配置完好,路由挂载那里必须使用routes属性 2.在app.vue中router- ...

  5. vue中创建全局单文件组件/命令

    1.在 vue中如果我们使用基于vue.js编写的插件,我们可以使用Vue.use() 如在main.js中: 2.添加全局命令,让每个vue单文件组件都可以使用到: 第一步:最好建一个全局的命令文件 ...

  6. vue中父级与子组件生命周期的先后顺序

    1.vue的生命周期 2.views/createrCustormer.vue为父级     <template>     <expressService />   </ ...

  7. 使用better-scroll在vue中封装自己的Scroll组件

    1. better-scroll 原理 用一张图感受: 绿色部分为 wrapper,也就是父容器,它会有固定的高度.黄色部分为 content,它是父容器的第一个子元素,它的高度会随着内容的大小而撑高 ...

  8. vue将HTML字符串解析为HTML标签

    如果返回的数据是html标签字符串的话,在vue里要通过v-html来渲染 <div v-html="rawHtml"></div> //v-html=&q ...

  9. 在vue中使用setter改写父子组件传的值

    概述 最近在用muse ui的时候碰到一个问题,简单来说是这样的,父子之间传值,父组件和子组件使用相同的props命名,并且子组件不用emit,而用等号赋值. 最后使用计算属性的setter函数解决了 ...

随机推荐

  1. 常用的字符串函数-S

    header('content-type:text/html;charset=utf-f'); /* $var=addslashes($_GET['username']);//转义表单提交内容中的引号 ...

  2. struts2之数据校验

    概述 在提交表单数据时,如果数据需要保存到数据库,空输入等可能会引发一些异常,为了避免引起用户的输入引起底层异常,通常在进行业务逻辑操作之前,先执行基本的数据校验. 下面通过四种方式来阐述Struts ...

  3. JavsScript学习---快速排序

    <script type="text/javascript"> /** * “快速排序”的思想很简单,整个排序过程只需要三步: * (1)在数据集之中,找一个基准点 * ...

  4. Linux命名空间

    Linux Namespaces机制提供一种资源隔离方案.PID,IPC,Network等系统资源不再是全局性的,而是属于特定的Namespace.每个Namespace里面的资源对其他Namespa ...

  5. BUAAOO P5-P7 Elevator Simulation

    目录 Abstract Introduction Topic Request Elevator Analysis Reading Requests Coordinating Scheduling an ...

  6. Sonar Java 规则插件开发 (基于阿里开发手册)

    引言 最近在做Sonar静态代码扫描管理,以此顺手接了Sonar的插件开发,基于阿里开发手册进行开发,在整体开发过程中,其中还是遇到不少坑位,也以此给大家做相应借鉴官网Demo演示插件开发地址:htt ...

  7. FreeCAD_DWG文件格式支持

    FreeCAD 是一款开源的三维模型制作软件,体积小.功能强大,可结合软件包划分网格进行有限元分析,上手速度极快.但也存在问题,即软件自身不支持DWG文件格式.本文介绍 FreeCAD 支持 DWG格 ...

  8. 十分钟搞定 pandas

    原文:http://pandas.pydata.org/pandas-docs/stable/10min.html 译者:ChaoSimple 校对:飞龙 官方网站上<10 Minutes to ...

  9. 1--Test NG--常见测试和注解

    第一:注解 (1)@test (2)@BeforeMethod,@AfterMethod (3)@BeforeClass,@AfterClass (4)@BeforeSuite,@AfterSuite ...

  10. org.springframework.beans.factory.BeanCreationException 解决异常错误

    一月 18, 2017 10:18:51 上午 org.apache.coyote.http11.Http11Protocol initINFO: Initializing Coyote HTTP/1 ...