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函数解决了 ...
随机推荐
- c++学习过程
作者本人也是一名初学者,我的QQ:2522929921,可以一起交流啊! 希望广大初学者能够一起进步: 1.掌握编程思维真的很重要!!!!***. 2.不能刻意记忆语法规则. 3.在循序渐进的项目实战 ...
- 精进之路之AQS及相关组件
AQS ( AbstractQueuedSynchronizer)是一个用来构建锁和同步器的框架,使用AQS能简单且高效地构造出应用广泛的大量的同步器,比如我们提到的ReentrantLock,Sem ...
- 安装linux虚拟机配置静态ip(NAT模式)
1.centOs7.VMware Workstation14 2.常规配置硬件和基本信息后,在图形安装界面将以太网链接打开,安装后配置ifcfg-e****,这里是我的配置文件 修改BOOTPROTO ...
- python笔记2——关于列表的使用
一.列表的一些基本用法 names=["XiaoNaiyou", "XiaoNan", "WeiZhen", "WuCheng ...
- 2018-4-25 初识html
第一天 简单了解web 路线 html css js 发布网站 web运作 html html是超文本语言,也就是标记语言.说白了也就规定了一些符号,然后赋予这些符号意义.比如规定a就是超链接标签,用 ...
- bind啊你返回的函数到底是个虾米
一般apply().call()和bind()会一起比较. 他们三个都是改变this对象指向的方法. apply()和cal()方法是会立即执行,apply把参数作为数组,call方法接收一个一个的参 ...
- 周强、张季跃，马凯军《面向对象与程序设计Java》第十四周学习总结
实验十四 Swing图形界面组件 实验时间 20178-11-29 理论部分:不使用布局管理器 有时候可能不想使用任何布局管理器,而只 是想把组件放在一个固定的位置上.下面是将一 个组件定位到某个绝 ...
- python基础1-转自金角大王
Python之路,Day1 - Python基础1---转自金角大王 本节内容 Python介绍 发展史 Python 2 or 3? 安装 Hello World程序 变量 用户输入 模块初识 ...
- iOS Property 关键字的使用
atomic和nonatomic用来决定编译器生成的getter和setter是否为原子操作. atomic 设置成员变量的@property属性时,默认为atomic,提供多线程安全 ...
- Spherical CNNs代码配置过程
ICLR18 best paper: Spherical CNNs 论文链接:https://arxiv.org/abs/1801.10130 GITHUB地址:https://github.com/ ...