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函数解决了 ...
随机推荐
- [git]入门-创建版本库
转载整理自:https://www.liaoxuefeng.com/wiki/0013739516305929606dd18361248578c67b8067c8c017b000/0013743256 ...
- nodejs02-fs模块
文件操作模块:fs-filesystem(异步) //readFile(文件名,回调函数) fs.readFile(); fs.readFile("aaa.txt",functio ...
- python "import this"
The Zen of Python, by Tim Peters Beautiful is better than ugly.Explicit is better than implicit.Simp ...
- OpenGL4.6+vs2017+CMake+Glad+Glfw-3.2.1+GLM随手记一发完整版OpenGL配置过程
参考自:https://blog.csdn.net/sigmarising/article/details/80470054 下载过程参考上面的链接. 下载好的OpenGL文件夹我已经做好(具体的版本 ...
- 使用VS调试DUMP文件
使用前准备: 1.保存编译文件的PDB文件(要和生成exe文件的对应) 2.在开发机器上,使用vs直接双击打开dmp文件,注意 进程名称 ,这个是程序运行crash的时候所在的目录位置,这个很重要. ...
- leetcode题解 9. Palindrome Number
9. Palindrome Number 题目: Determine whether an integer is a palindrome. Do this without extra space. ...
- Java 程序员必须了解的 7 个性能指标
来源:王韵菲 本文中,小编搜集了7个最有影响的衡量标注,让你可以不依赖日志文件来了解应用程序.现在,让我们看看这些性能指标,并了解如何查看并收集它们: 1.响应时间和吞吐量 根据应用程序的响 ...
- learn-ES6基础语法1-let&const
1.let ① 使用let声明的变量,所声明的变量只能在命令所在的代码块内有效. 同样在代码块内的a和c,c在代码块内就可以输出,a在代码块外就找不到了. ② 使用let命令声明的变量在域解析的时候不 ...
- 添加PROPAGATION_REQUIRES_NEW 事务没有产生作用
最近在做事务添加时 发现自己的事务没有新建,上网查到 仅用作收藏. 其二 注意 事务的注解 应该在 内层的事务上面 一.描述Spring遇到嵌套事务时,当被嵌套的事务被定义为“PROPAG ...
- （转）es6中object.create()和object.assign()
今天学习javascript面向对象,在学习Obejct方法时了解到create方法,偶像想起之前使用的assign方法,顺带查找一番,感觉这篇博客讲解详细,遂转载. 先简单提一下装饰器函数,许多面向 ...