加载远程.vue文件并使用(Vue3版)

_引力波2023-09-13 15:03

之前写了基于Vue2版的加载远程.vue组件，后面有友友问关于 Vue3 的版本，经过踩坑实践后写出来了记录一下。

vue3-sfc-loader 插件

Vue3/Vue2单文件组件加载器在运行时从html/js/string动态加载.vue文件并转成响应式组件

loadModule 导入

Vue3 的导入路径和Vue2有点不一样，我这里使用esm版本

js 复制代码

// Vue3 esm 版
import { loadModule } from 'vue3-sfc-loader/dist/vue3-sfc-loader.esm.js'

获取Vue

因为Vue3 不默认导出Vue了，所以这里直接导入所有

js 复制代码

import * as Vue from 'vue'

远程加载

loadModule 第一个参数是组件路径字符串，会传入getFile方法中

在getFile 走http 获取远程组件文件，此处我使用fetch API ，请求成功后调text() 返回最终就是返回的一个字符串文本

这里使用Vue3 defineAsyncComponent 加载组件

js 复制代码

const options = {
  moduleCache: {
    vue: Vue,
  },
  async getFile (url: string) {
    return await fetch(url).then(res => res.text())
  },
  addStyle () {
    /* unused here */
  },
}
const asyncComponent = defineAsyncComponent(() => loadModule('/vue/v3test.vue', options))

渲染组件

渲染就使用 :is 动态渲染

同时传递属性和绑定事件

js 复制代码

<component :is="asyncComponent" v-bind="$attrs"/>

完整代码

js 复制代码

<template>
  <div>
    <component :is="asyncComponent" v-bind="$attrs"/>
  </div>
</template>

<script setup lang="ts">
import * as Vue from 'vue'
import { loadModule } from 'vue3-sfc-loader/dist/vue3-sfc-loader.esm.js'
import { defineAsyncComponent } from 'vue'
const options = {
  moduleCache: {
    vue: Vue,
  },
  async getFile (url: string) {
    return await fetch(url).then(res => res.text())
  },
  addStyle () {
    /* unused here */
  },
}
const asyncComponent = defineAsyncComponent(() => loadModule('/vue/v3test.vue', options))
</script>