在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>