Vue2开发插件实现向自定义Example组件传递HTML或组件并渲染的方法

实现步骤 #

1. 调整Example组件，增加动态渲染能力 #

先给Example组件扩展props接收外部传入的渲染内容，同时兼容HTML字符串和Vue组件两种渲染模式：

<template>
  <div class="example">
    <!-- 渲染HTML字符串场景 -->
    <div v-if="isHtml" v-html="renderContent"></div>
    <!-- 渲染Vue组件场景 -->
    <component v-else :is="renderContent" v-bind="componentProps"></component>
  </div>
</template>

<script lang="ts">
import Vue from 'vue';
export default Vue.extend({
  name: 'Example',
  props: {
    // 要渲染的内容：可以是HTML字符串，也可以是Vue组件对象
    renderContent: {
      type: [String, Object],
      required: true
    },
    // 标记当前内容是否是HTML字符串
    isHtml: {
      type: Boolean,
      default: false
    },
    // 如果是组件，可传入组件需要的props
    componentProps: {
      type: Object,
      default: () => ({})
    }
  }
});
</script>

2. 完善Vue插件逻辑 #

插件需要先全局注册Example组件，同时暴露全局调用入口，支持外部动态传入要渲染的内容，也兼容安装插件时传入默认渲染内容：

import Example from './Example.vue' // 替换为你本地Example组件的实际路径

export default {
  install(vue, opts = {}){
    // 全局注册Example组件，所有业务组件内可直接<Example />调用
    vue.component('Example', Example)

    // 挂载全局方法，支持动态生成渲染了指定内容的Example实例
    vue.prototype.$renderToExample = function (content, config = {}) {
      return {
        render(h) {
          return h(Example, {
            props: {
              renderContent: content,
              isHtml: config.isHtml || false,
              componentProps: config.props || {}
            }
          })
        }
      }
    }

    // 可选：插件安装时如果传入了默认内容，直接挂载全局默认Example实例
    if (opts.defaultContent) {
      vue.prototype.$defaultExample = new vue({
        render: h => h(Example, {
          props: {
            renderContent: opts.defaultContent,
            isHtml: opts.defaultIsHtml || false,
            componentProps: opts.defaultProps || {}
          }
        })
      })
    }
  }
}

3. 实际使用示例 #

首先在项目入口注册插件：

import Vue from 'vue'
import ExamplePlugin from './example-plugin' // 替换为插件实际路径

// 注册插件，可选传入默认配置
Vue.use(ExamplePlugin, {
  // 可按需传入默认渲染内容，无需则省略
  // defaultContent: '<p>默认HTML内容</p>',
  // defaultIsHtml: true
})

场景1：渲染HTML字符串

在任意业务组件内直接调用：

<template>
  <div>
    <Example :render-content="htmlStr" :is-html="true" />
  </div>
</template>
<script>
export default {
  data() {
    return {
      htmlStr: '<p style="color: red;">动态传入的HTML内容</p>'
    }
  }
}
</script>

场景2：渲染自定义Vue组件

假设你有自定义组件CustomComp.vue：

<template>
  <div>自定义组件，接收参数：{{ test }}</div>
</template>
<script>
export default {
  props: ['test']
}
</script>

在业务组件内将其渲染到Example中：

<template>
  <div>
    <Example :render-content="CustomComp" :component-props="compProps" />
  </div>
</template>
<script>
import CustomComp from './CustomComp.vue'
export default {
  data() {
    return {
      CustomComp,
      compProps: {
        test: '传给组件的参数'
      }
    }
  }
}
</script>

注意：使用v-html渲染动态传入的HTML字符串存在XSS安全风险，请确保传入的HTML内容是可信的，避免恶意脚本注入。

内容的提问来源于stack exchange，提问作者Umang Patel