Vue 中动态渲染插槽内容

Vue 中动态渲染插槽内容

原创地址：原创地址
开发遇到插槽内容动态渲染的需求，v-html只支持原生的html标签，因此找到现在的方法，实现需求。

创建支持渲染的组件

cmp为组件名称，可自行修改
html为组件接受参数

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

动态渲染插槽内容

cmp组件中，给html传入插槽内容即可

<template  v-for="(item,index) in slots" :slot="item.title"  slot-scope="text, record"   >
          <cmp :html="item.content" ></cmp>
        </template>

查看效果

传入的内容为

页面展示效果

可能遇到错误问题解决办法

浏览器提示runtime-compiler 或 runtime-only
在vue.config.js 加入

module.exports = {
  runtimeCompiler:true,
 }