vue中如何实现传入字符串渲染成组件

配置vue.config.js

vue.config.js配置 vue$: "vue/dist/vue.esm.js",使用完整构建版本（vue.esm.js）支持template编译模式

module.exports = {
     configureWebpack: config => {
          config.resolve.alias = {
             '@': path.resolve(__dirname, './src'),
             vuee$: "vue/dist/vue.esm.js",
          }
     }
}

子组件

组件searchItems
<script>
import Vue from "vue";
export default {
  name: 'searchItems',
  functional: true,
  props: {
    templateText: String,
  
  },
  render: function (h, ctx) {
    const com = Vue.extend({
      template: "<div>" + ctx.props.templateText + "</div>",
    });
    return h(com, {});
  }
}
</script>

使用

<SearchItems :templateText="templateText"></searchItems>

templateText:`<el-tag effect="plain" size="mini">发生时间</el-tag>,
<el-tag effect="plain" size="mini">业务动机</el-tag>,
发送短信,内容为：<el-tag effect="plain" size="mini"
>短信文本</el-tag>,链接已打开<el-tag effect="plain" size="mini">次数</el-tag>次。`

实现效果

当需要动态根据后端返回数据渲染组件时应用这种方式