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函数解决了 ...
随机推荐
- nodejs03-GET数据处理
数据请求:--- 前台:form ajax jsonp 后台:一样 请求方式: 1.GET 数据在URL中 2.POST 数据在请求体中 请求数据组成: 头--header:url,头信息 身子--c ...
- Windows 10 远程桌面出现身份验证错误：要求的函数不受支持（解决）
爬梯子还是快一些,百度搜一年也搜不到~~~囧 给出原始地址,百度的某些解决方案不知道是不是截取过来搞错了还是啥,返回和原始方案就差一丢丢,浪费时间. https://windowsreport.com ...
- centos7：ftp上传文件
ftp> lcd /var/www/sss 上传文件的地址还一种上传方式ftp> passivePassive mode off.ftp> passivePassive mode ...
- WeX5学习笔记 - 01
了解WeX5,有朋友突然自己开始学习WeX5,我了解后觉得挺不错的实用范围广,现在手机上的主流软件基本都可以采用WeX5进行开发,如淘宝,美团.手机银行等,所以自己也开始学习WeX5,WeX5是Ecl ...
- ZT 解决Ubuntu下SublimeText3不能输入中文问题
git clone https://github.com/lyfeyaj/sublime-text-imfix.git运行脚本 :cd sublime-text-imfix && ./ ...
- wav文件系列_2_Python实现读写
本文介绍了 Python 实现音频读写的方法.Python wave 模块提供便捷的 wav 文件操作.该模块并不支持压缩与解压,但支持单声道/立体声的转换. 参考: [1] wave — Read ...
- navicat premium 安装破解(Mac & win)
1.windows请参考以下连接: https://www.jianshu.com/p/5f693b4c9468 2.mac安装教程 下载:http://www.pc6.com/mac/111878. ...
- 【证明】【一题多解】布尔不等式（union bound）的证明
布尔不等式(Boole's inequality)也叫(union bound),即并集的上界,描述的是至少一个事件发生的概率(P(⋃iAi)" role="presentatio ...
- 浅谈MVC中的service层（转）
概述 mvc框架由model,view,controller组成,执行流程一般是:在controller访问model获取数据,通过view渲染页面. mvc模式是web开发中的基础模式,采用的是分层 ...
- kettle之linux使用kettle
Kettle可以在Window.Linux.Unix上运行,数据抽取高效稳定,使用之前需要准备环境. 准备java环境,这里就不赘述了,建议jdk7以上版本. 上传kettle压缩包,并解压,我解压的 ...