技术

Vue父子组件传值
Vue render函数的引用
Vue.extend的使用
Vue v-html的引用

背景

业务需在web端回显DOm结构的报告预览，现主要针对element组件元素渲染的代码解析

在引入正题之前，我们先来关注一下这个问题,

关于在vue 中 html标签的渲染与使用[v-html]

现简述用法：

 <div class="content" v-html="rawHtml | htmlFilter"></div>

需将转义过的html代码通过vue的filter(过滤器)转义成为普通html代码，本例中添加了名为htmlFilter的过滤器:

filters: {
        unescape:function (html) {
            return html
                .replace(html ? /&(?!#?\w+;)/g : /&/g, '&')
                .replace(/</g, "<")
                .replace(/>/g, ">")
                .replace(/"/g, "\"")
                .replace(/'/g, "\'");
        }
    }

接下来，我们进入正题:

关于在vue 中element组件标签模板渲染与使用

总体结构为：父组件->子组件[此为需要的渲染的element结构标签]

此业务为前后端联调，后端负责返回需要渲染的模板字符串格式，如下图所示：

templateHtml: `<el-form
      :model="{ type: '' }"
      :rules="{ type: [{ required: true, trigger: '' }] }"
    >
      <el-form-item label="活动性质" prop="type">
        <el-checkbox :value="true" label="美食/餐厅线上活动"></el-checkbox>
        <el-checkbox label="地推活动"></el-checkbox>
        <el-checkbox label="线下主题活动"></el-checkbox>
        <el-checkbox label="单纯品牌曝光"></el-checkbox>
      </el-form-item>
    </el-form>`,

前后采用template替代模板字符串直接渲染在v-html中未果，随后查询资料得知可以使用render,Vue.extend挂载,jsx渲染等技术，本例将主要介绍前两者:

首先，在引入子组件中申明需要渲染的模板templateHtml:

<mySlot :html="templateHtml"></mySlot>

随后使用render函数渲染，最后实现模板的动态赋值,代码块如下：

import Vue from "vue";
  export default {
    name: "RequireHtml",
    components: {
      mySlot: {
        // template: `<div>{{myMessage}}</div>`,
        // 在 JavaScript 中使用 camelCase
        props: {
          html: String,
        },
        render(h) {
          const com = Vue.extend({
            template: this.html,
          });
          return h(com, {});
        },
      },
    },
    data() {
      return {
        isShow: undefined,
        templateHtml: `<div></div>`,
      };
    },
    methods: {
      getList(html) {
        this.templateHtml = html;
      },
    }, 
  };

备注：这里的getList方法用于父级组件的字符模板传值

此致
Kyle