Vue 中渲染字符串形式的组件标签

时间：2022-09-21 21:43:03

在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中利用&dollar;emit实现子组件向父组件通信

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

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

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

  5. vue中创建全局单文件组件&sol;命令

    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. 动手做第一个Chrome插件

    Chrome插件是令人惊讶的简单,一旦你弄懂它的工作和实现原理.它是由一部分HTML,一部分Js,然后混合了一个叫做manifest.json的Json文件组合而成的整体.这意味着你可以使用你最擅长的 ...

  2. 如何使用coding&period;net

        由于我有一位十分聪明能干的室友会使用coding.net,于是我决定奉献一下室友的智慧,告诉大家如何使用conding.net上交作业.(如有说错的地方希望大家可以指出来) 首先登陆codin ...

  3. LM-Sensors unable to load driver module

    Fix - sort of - for LM-Sensors unable to load driver module In short: In /etc/default/grub set GRUB_ ...

  4. 【云计算】Kubernetes、Marathon等框架需要解决什么样的问题？

    闲谈Kubernetes 的主要特性和经验分享       Capitalonline全球云主机.全球私有网络,免费试用进行时 »   主要介绍 Kubernetes 的主要特性和一些经验.先从整体上 ...

  5. Qt5&period;4生成安装包过程

    所需工具: 1.  HM NIS Edit 2.  windeployqt.exe 第一个工具需要自己去网上下载,第二个工具可以在qt安装目录下找到:D:\qtopengl\5.4\mingw491_ ...

  6. PHP XML DOM

    PHP XML DOM 内建的 DOM 解析器使在 PHP 中处理 XML 文档成为可能. DOM 是什么? W3C DOM 提供了针对 HTML 和 XML 文档的标准对象集,以及用于访问和操作这些 ...

  7. 谷歌Chrome浏览器提示adobe flash player已过期完美解决办法

    最近使用谷歌Chrome浏览器提示adobe flash player已过期,浏览网页时一些flash元素的东西都无法正常显示,在网上尝试寻找很多方法,都不能解决,最后,经测试有效方法如下:一:下载最 ...

  8. 在lnmp1&period;3布置的web服务器上运行thinkphp3&period;2&period;3项目pathinfo路径模式

    通过我的经历希望能给大家带来一些帮助: 我是在Linux系统上通过https://lnmp.org/install.html设置Nginx服务器,使用的是lnmp1.3版本,之后将一个thinkphp ...

  9. Java NIO 详解（一）

    一.基本概念描述 1.1 I/O简介 I/O即输入输出,是计算机与外界世界的一个借口.IO操作的实际主题是操作系统.在java编程中,一般使用流的方式来处理IO,所有的IO都被视作是单个字节的移动,通 ...

  10. Android 如何在Eclipse 引入外部纯Java项目（不是打成Jar使用）

    应用情景--如标题: 在Eclipse的 “Android启动项目”中引入“外部的纯Java项目”,能运行的只有是基于Android的测试代码才可以. 一直很纳闷,如果外部写好一个Java插件(例如服 ...

相关文章