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

在vue中如果要渲染字符串形式的标签，vue 提供了 v-html指令，可以很方便的渲染出来。但是如果这个标签是一个组件，或者element-ui 的组件时，就不能解析出来了，因为v-html 只能解析原生的属性。那么就要使用jsx渲染来解析<!DOCTYPE html><html><head><meta charset="UTF-...

命里良人

6818人浏览 · 2020-04-30 11:13:37

命里良人 · 2020-04-30 11:13:37 发布

在这里插入图片描述

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

Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^