在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. Oracle启动和关闭数据库

    本机只安装一个数据库的情况下sqlplus / as sysdba启动数据库startup关闭数据库shutdown immediate

  2. python模块之os_sys_动态导入_包

    os模块: #!/usr/bin/env python # coding:utf-8 import os print(os.getcwd()) #获取当前工作目录,即当前python脚本工作的目录路径 ...

  3. 2017-10-6模拟赛T3 丝(filament)

    题目 题解 20分实在想不到是什么做法…… 40分做法,从小到大枚举最小循环节长度,O(n) check即可,总复杂度O(n^2). 100分做法: 看到数据范围,T*n<=10^6,可知这题需 ...

  4. 以编程方式使用 Microsoft Office Visio 2003 ActiveX 控件

    以编程方式使用 Microsoft Office Visio 2003 ActiveX 控件 2007/10/29 Mark BukovecEmpire Down Development 适用于:Mi ...

  5. Windows 2008 asp.net 配置

    目录 1.     前言.. 32.     部署环境.. 32.1         服务器环境信息.. 33.     磁盘阵列配置.. 44.     安装操作系统.. 45.     安装软件. ...

  6. 搭建SSM（Spring+SpringMVC+Mybatis）

    1.SpringMVC和Spring不需要什么特殊配置就可以结合 2.Mybatis和Spring (1)需要引入额外的jar包:mybatis-spring-1.2.2.jar (2)配置数据源 ( ...

  7. socket网络编程-----I/O复用之select函数

    #include <stdio.h> #include <stdlib.h> #include <sys/types.h> #include <sys/soc ...

  8. 周强、张季跃，马凯军《面向对象与程序设计Java》第十四周学习总结

    实验十四  Swing图形界面组件 实验时间 20178-11-29 理论部分:不使用布局管理器 有时候可能不想使用任何布局管理器,而只 是想把组件放在一个固定的位置上.下面是将一 个组件定位到某个绝 ...

  9. textview自定义跳转链接

    设置方式 ,主要是遍历html中的url,然后加一个自定义的跳转 private void setTextLink(String rule) { if(TextUtils.isEmpty(rule)) ...

  10. springcould 微服务 搭建

    摘自:https://www.cnblogs.com/lori/p/10615654.html    (完整) springcloud~服务注册与发现Eureka的使用   服务注册与发现是微服务里的 ...