Vue 中渲染字符串形式的组件标签

2023-08-26 15:58| 来源: 网络整理| 查看: 265

在vue中如果要渲染字符串形式的标签，vue 提供了 v-html 指令，可以很方便的渲染出来。但是如果这个标签是一个组件，或者element-ui 的组件时，就不能解析出来了，因为v-html 只能解析原生的属性。

那么就要使用jsx渲染来解析

{{ form }} 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: '按钮', form: { name: '', age: '' }, formParams: [{ name: '名称', type: 'name', html: '' }, { name: '年龄', type: 'age', html: '' }, ] }, mounted() { this.$nextTick(function () { this.$forceUpdate(); }) } })

当然在开发过程中肯定不会像上面那么些，将采用以下方法：

import Vue from 'vue'; import AudioPlay from '@/components/media/audioPlay'; Vue.component('audio-play', AudioPlay); export default { name: 'audio', data() { return { el: '

hello world

' }; }, components: { cmp: { props: { html: String }, render(h) { const com = Vue.extend({ template: this.html }) return h(com, {}) } } }, };

【本文地址】

公司简介

联系我们