在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. 20175224 2018-2019-2 《Java程序设计》第八周学习总结

    教材学习内容总结 第十五章 泛型与集合框架 泛型 泛型:目的为建立具有类型安全的集合框架. 泛型类声明:class People<E> class 名称<泛型列表> 链表 定义 ...

  2. windows10安装anaconda,配置tensorflow

    1.安装anaconda 3.5.5 默认安装,注意,把添加到path勾选上,其他默认安装(能搜到这篇文章,相信大家都有过变成经验,这些环境变量的重要性就不要窝在多说了) 2.以管理员身份,打开ana ...

  3. KendoUi 学习笔记(二) Grid

    Kendo.ui.Grid Kendo Ui Grid控件,继承至Widget. 一.构造       allowCopy    Boolen|Object  (默认:false) 当他设置true, ...

  4. Gurobi在Python环境里安装与使用（Windows环境）

  5. jQuery常用 遍历函数

    jQuery 遍历函数包括了用于筛选.查找和串联元素的方法.本文主要介绍日常工作中常用的JQ遍历,帮助一下初学者快速的接触遍历函数,提高自己的代码编写速度,写出更简洁更实用的代码,祝前端的同学们,在前 ...

  6. background属性冲突导致的部分浏览器背景图片不显示问题

    前几天在项目中遇到了一个让人摸不着头脑的bug,测试说页面显示有点问题并发了截图, 正常的显示状态是这样 首先我自信地用自己的手机检查了一下,没有问题,问清楚后得知是UC浏览器中出现的,UC的内核是u ...

  7. 从软件测试转型到C#上位机程序员

    一直在做软件测试的工作,天天与程序员不依不饶的争论细节的问题,没想到自己也有那么一天走上程序员的道路,由此开始,我的博客天天更新自己的学习状态,分享自己的心得. C#是微软公司发布的一种面向对象的.运 ...

  8. 2018-2019-2 网络对抗技术 20165228 Exp5 MSF基础应用

    2018-2019-2 网络对抗技术 20165228 Exp5 MSF基础应用 exploit选取 主动攻击:ms17_010_eternalblue(唯一) 浏览器攻击:ms05_054_onlo ...

  9. s21day23 python笔记

    s21day23 python笔记 一.内容回顾及补充 字符串格式化 %s # 示例一:特别注意:最后的右括号前面必须有逗号(,) msg = '我是%s,年龄%s'%('alex',19,) # 元 ...

  10. ios 当margin-left margin-right 超过设备宽度

    ios 当margin-left  margin-right过长,相加超过  超过设备宽度时,导致页面不能上下滚动,目前尚未找到解决办法,记录一下