javascript - 使用 Vue 3 将函数动态导入组件

Question

我想动态地（不是静态地）将函数导入到里面的组件中<script setup> ... </script>

函数位于pme-check.js文件中。

import { useStore } from 'vuex';

const store = useStore();

function foo() {
  console.log('foo');
}

function bar() {
 console.log('bar');
}

export { foo, bar };

在组件中，我像这样动态导入我的函数并且它可以正常工作

import(`../composables/profil/${store.state.formation.profil}-check`).then(
  (module) => {
    console.log(module.foo());
    // -> 'foo'
    console.log(module.bar());
    // -> 'bar
  }
);

但是这样一来，我的函数就不能在组件中通过名字来访问了。

如何获取组件的标签中的foo()任何bar()位置。<script setup>

谢谢

标签： javascriptvue.jsimportvuejs3vue-script-setup

Answer 1

可以将导入的函数赋值给refs 1️⃣，然后通过refs value2️⃣使用函数：

<script setup>
import { ref, watchEffect } from 'vue'

let foo = ref()
let bar = ref()

watchEffect(() => {
  import(`../composables/profil/${store.state.formation.profil}-check`)
    .then((module) => {
      1️⃣
      foo.value = module.foo
      bar.value = module.bar
    })
})

const fooAndBar = () => {
  2️⃣
  foo.value()
  bar.value()
}
</script>

演示