Vue 中渲染字符串形式的组件标签
在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 中渲染字符串形式的组件标签的更多相关文章
- C语言中以字符串形式输出枚举变量
C语言中以字符串形式输出枚举变量 摘自:https://blog.csdn.net/haifeilang/article/details/41079255 2014年11月13日 15:17:20 h ...
- 在vue中使用Element的message组件
在vue中使用Element的message组件 在vue文件中使用 this.$message({ message: "提示信息", type: "success&qu ...
- Vue中利用$emit实现子组件向父组件通信
Vue中利用$emit实现子组件向父组件通信 父组件 <template> <div> <p>我是父组件</p> <child :isShow=& ...
- router-view组件在app.vue中渲染不出来怎么办
1.在app.vue使用router-view组件直接渲染 页面什么都没显示,可能问题出在路由配置上了,检查路由是否配置完好,路由挂载那里必须使用routes属性 2.在app.vue中router- ...
- vue中创建全局单文件组件/命令
1.在 vue中如果我们使用基于vue.js编写的插件,我们可以使用Vue.use() 如在main.js中: 2.添加全局命令,让每个vue单文件组件都可以使用到: 第一步:最好建一个全局的命令文件 ...
- vue中父级与子组件生命周期的先后顺序
1.vue的生命周期 2.views/createrCustormer.vue为父级 <template> <expressService /> </ ...
- 使用better-scroll在vue中封装自己的Scroll组件
1. better-scroll 原理 用一张图感受: 绿色部分为 wrapper,也就是父容器,它会有固定的高度.黄色部分为 content,它是父容器的第一个子元素,它的高度会随着内容的大小而撑高 ...
- vue将HTML字符串解析为HTML标签
如果返回的数据是html标签字符串的话,在vue里要通过v-html来渲染 <div v-html="rawHtml"></div> //v-html=&q ...
- 在vue中使用setter改写父子组件传的值
概述 最近在用muse ui的时候碰到一个问题,简单来说是这样的,父子之间传值,父组件和子组件使用相同的props命名,并且子组件不用emit,而用等号赋值. 最后使用计算属性的setter函数解决了 ...
随机推荐
- UDP聊天工具的实现
利用TIdUDPClient; TIdUDPServer; 实现聊天,其实很不爽,没有解决中文乱码问题,以后补充吧! 代码如下: unit Unit1; interface uses ...
- java this关键字的使用
this关键字 this关键字只能在方法内部使用,表示对"调用方法的那个对象"的引用. this的三个用法: 1.调用本类中的其他方法 如果在方法 ...
- Oracle入门之表结构的管理
建表的基本语法: create table table_name( field1 datatype, field1 datatype, field1 datatype, ... ) 注:table_n ...
- 动态流程图关于jointJs的使用
这段时间由于业务需要,需要展现动态的流程图.具体实现效果如图所示: jointJS中的线条以及框都是依赖SVG进行的二次开发.建议初学者先学习svg里相关属性,便于在阅读jointJs的API或者de ...
- day 22 面向对象 类与对象 名称空间操作
一.面向对象 1.面向过程编程 核心是"过程"二字,过程指的是解决问题的步骤,即先干什么再干什么 基于该思想编写程序就好比在编写一条流水线,是一种机械式的思维方式. 优点:复杂的问 ...
- 原型图 ER 8.0的注册码
axuer8.0注册码Licensee:米 业成 (STUDENT)Key:nFmqBBvEqdvbiUjy8NZiyWiRSg3yO+PtZ8c9wdwxWse4WprphvSu9sohAdpNnJ ...
- idea 引入web、配制tomcat
引入web包: https://www.cnblogs.com/chenloveslife/p/8973912.html 配置tomcat:https://blog.csdn.net/qq_33257 ...
- 搞Java
上班之余,开始研究Java了. 想想从三月份开始自己啃书以来,Spring+Mybatis+公司框架的用法,基本都是速成来的,还是有些恐惧的. Spring万般爽,annotion用的很舒服,但还是想 ...
- FreeCAD_DWG文件格式支持
FreeCAD 是一款开源的三维模型制作软件,体积小.功能强大,可结合软件包划分网格进行有限元分析,上手速度极快.但也存在问题,即软件自身不支持DWG文件格式.本文介绍 FreeCAD 支持 DWG格 ...
- Linux 文件恢复
可以恢复,使用系统自还工具debugfs来还原删除的文件 步骤详解 1. 查看一下当前系统版本号,及文件系统格式 [root@localhost ~]# df -T Filesystem Type 1 ...