如何从应用程序外部调用 Vue 3 方法

Question

我想要的是调用一个方法，在页面组件之外的 vue 3 应用程序表单中声明。所以到目前为止我做了什么：

App.vue

<script setup>
 
function test(){
console.log('test');
}
</script>

vue.js

import { createApp } from 'vue'
import App from 'App.vue'

window.app = createApp(App).mount('#app')

index.html

<div id="app"></app>
<script src="app.js"></script>

<script>
 fuction callTest(){
   window.app.test() // <-- this returns undefined
 }
</script>

但是它适用于 vue2。知道如何让它与 vue3 一起工作吗？

Answer 1

您需要在第一个文件中使用 defineExpose 才能在组件外使用它：

<script setup>
 
function test(){
 console.log('test');
}
defineExpose({
 test
})
</script>