在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. selenium+python启动浏览器出错，安装浏览器驱动

    WebDriver 支持 Firefox (FirefoxDriver).IE (InternetExplorerDriver).Opera (OperaDriver) 和 Chrome (Chrom ...

  2. 图数据库Neo4j

    官网下载:https://neo4j.com/download/ 图数据库Neo4j入门:https://blog.csdn.net/gobitan/article/details/68929118 ...

  3. 马凯军201771010116《面向对象与程序设计Java》

    实验十八  总复习 实验时间 2018-12-30 1.实验目的与要求 (1) 综合掌握java基本程序结构: (2) 综合掌握java面向对象程序设计特点: (3) 综合掌握java GUI 程序设 ...

  4. centos 系统上如何把python升级为3

    第一种方式: SCL 源目前由 CentOS SIG 维护,除了重新编译构建 Red Hat 的 Software Collections 外,还额外提供一些它们自己的软件包. 该源中包含不少程序的更 ...

  5. C#ATM

    using System;using System.Collections.Generic;using System.Linq;using System.Text;using System.Threa ...

  6. 关于第一次在IDEA上使用lombok时注解完全不起作用

    当你第一次在IDEA上使用lombok这个工具包时,如果你没有在setting--->Plugins-->Marketplace-->安装Lombok plugin 同时设置 Set ...

  7. AS 400 常用命令

    转自:http://blog.chinaunix.net/uid-22375044-id-3049793.html 一.命令技巧 命令构成: CRT* (Creat) 创建 WRK* (Work Wi ...

  8. php中print、echo、print_r、var_dump的区别

    echo,print,print_r,var_dump区别 print只能接收一个字符串:print有返回值1(可在表达式中使用) e.g print 'string 1' e.g if($exp & ...

  9. Unity攻略

    Unity开发VR之Vuforia 本文提供全流程,中文翻译. Chinar 坚持将简单的生活方式,带给世人!(拥有更好的阅读体验 -- 高分辨率用户请根据需求调整网页缩放比例) Chinar -- ...

  10. Vue基础之初识Vue

    Vue特点及优点 小巧,压缩后体积17KB: 渐进式,不需要一口吃成大胖子,一上来就用所有的东西,可以一步一步.有阶段的先吃成小胖子: 数据驱动,双向数据绑定,MVVM模式,详见下一段 指令,例如v- ...