如何在JavaScript中从Vue应用程序外部调用自定义Vue方法？

我有一个用Vue编写的简单应用程序。我只想从Vue调用一个方法，一个自定义方法，在Vue.createApp（）方法之外

我的代码：

const app = Vue.createApp({
data() {
    return {
        data: ["this","is","an", "example"],
    }
 },
 methods: {
  getData() {
    return this.data;
  },
 },
});


app.mount('#app');

// This instruction fails!
console.log(app.getData());

当我试图执行最后一行的方法时，我进入控制台：

Uncaught TypeError: Cannot read property 'content' of undefined

---

为什么我不能执行该方法？怎么了？

您发布的代码实际上是

/*仅更改了样式*/
const{createApp}=Vue；
const app=createApp({
模板：“”，
数据：（）=>({
数据：['this'，'is'，'an'，'example']，
}),
方法：{
getData（）{
返回此.data；
},
},
}).mount（“#app”）；
console.log（app.getData（））；

编辑

这是一个错误，通常应避免。如果您希望在远程组件之间共享状态，则应该查看。如果组件靠得很近，即父组件和子组件，请查看

---

你能提供更多关于这背后动机的信息吗？

关于具体问题：

为什么我不能执行该方法

原因是您正在调用应用程序实例上的方法，而不是定义函数的组件。

createApp

的第一个参数是根组件

要获取根组件，请使用：

const-app=Vue.createApp（{/*根组件的数据、方法等*/}）；
const root=app.mount（“#app”）；
//从mount（）返回值时可访问的组件方法
log（root.getData（））；

你为什么要这样做？我需要根据应用程序的数据进行更复杂的计算，但第一步，即执行该方法，不起作用。我认为你决定做的是一种不好的做法，你可以定义一个组件，使用多个选项来执行逻辑，并显示结果Brahim是正确的。探索Vuex、mixin或Composition函数来实现您想要做的事情可能是值得的。这很奇怪，我刚刚在SO中的snippet code runner中进行了尝试，但它不起作用，但在您的示例中works@BoussadjraBrahim有趣的是，我想知道这是否是因为在调用

console.log

之前组件还没有准备好。。。无论如何，这是一种反模式。这是对所问问题的正确答案。该变量必须是.mount（）返回的变量，而不是.createApp（）返回的变量。我在这件事上浪费了好几个小时，直到看到你的答案。