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

【问题标题】：How to call a custom Vue 3 method from outside vue app in JavaScript?如何在 JavaScript 中从外部 vue 应用程序调用自定义 Vue 3 方法？
【发布时间】：2021-02-21 18:21:42
【问题描述】：

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

我的代码：

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

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

【问题讨论】：

你为什么要这么做？
我需要根据应用程序的数据进行更复杂的计算，但第一步，即执行方法，不起作用
我认为你决定做的是一个不好的做法，你可以定义一个组件并使用多个选项来执行你的逻辑并显示结果
布拉希姆是对的。可能值得探索 Vuex、Mixins 或 Composition 函数来实现您想要做的事情。

标签： javascript vuejs3

【解决方案1】：

具体问题：

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

原因是您调用的是应用程序实例上的方法，而不是定义函数的组件。 createApp 的第一个参数是根组件。

要获取根组件，请使用：

const app = Vue.createApp({ /* root component's data, methods, etc */ });
const root = app.mount("#app");

// component methods accessible on return value from mount()
console.log(root.getData());

【讨论】：

这是对所提问题的正确答案。该变量必须是 .mount() 返回的变量，而不是 .createApp() 返回的变量。在看到你的答案之前，我浪费了几个小时。

【解决方案2】：

您发布的代码实际上是 work。

/* only the style has been changed */

const { createApp } = Vue;

const app = createApp({
    template: '<div />',

    data: () => ({
        data: ['this', 'is', 'an', 'example'],
    }),

    methods: {
        getData() {
            return this.data;
        },
    },
}).mount('#app');

console.log(app.getData());

编辑

这是anti-pattern，通常应避免使用。如果您希望在远程组件之间共享状态，您应该查看Vuex。如果组件靠得很近，即 parent 和 child，请查看 props。

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

【讨论】：

这很奇怪，我刚刚在 SO 中的 sn-p 代码运行器中进行了尝试，但它不起作用，但在你的示例中它可以工作
@BoussadjraBrahim 很有趣，我想知道是不是因为在我们调用console.log 之前组件还没有准备好......无论如何，这是一种反模式。