时间戳

首页 > 解决方案 > 如何在 JavaScript 中从外部 vue 应用程序调用自定义 Vue 3 方法？

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

问题描述

我有一个用 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

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

标签： javascriptvuejs3

解决方案

对于具体问题：

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

原因是您调用的是应用程序实例上的方法，而不是定义函数的组件。第一个参数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());

推荐阅读