代码之家 › 专栏 › 技术社区 › Edward Tanguay

如何在Vue中从App对象外部调用方法。JS3?

vuejs3

0

Edward Tanguay · 技术社区 · 5 年前

在Vue。js 2,我以前可以打电话给我的 initialize() 我的课堂之外的方法如下:

<!DOCTYPE html>
<head>
    <script src="https://unpkg.com/vue@next"></script>
    <title>test</title>
</head>
<body>
    <div id="app">
        <div>{{message}}</div>
    </div>

    <script>
        const app = Vue.createApp({
            data() {
                return {
                    message: 'initial value'
                }
            },
            methods: {
                initialize() {
                    this.message = 'changed value';
                }
            }
        });
        app.mount("#app");
        app.initialize();
    </script>
</body>
</html>

但是上面的代码在Vue中。JS3得到了错误:

未捕获类型错误:应用程序。初始化不是一个函数

我怎样才能在Vue中做到这一点。JS3?

0 回复 | 直到 5 年前

1

2

skirtle 5 年前

您需要在组件实例而不是应用程序实例上调用该方法:

const app = Vue.createApp({
  methods: {
    initialize() { /* ... */ }
  }
});

const vm = app.mount("#app");
vm.initialize();

对象传递给 createApp 包含根组件的选项。这个 mount 方法返回根组件实例。

文档中有一个例子:

https://v3.vuejs.org/guide/data-methods.html#methods

您可能还想看看下面的页面,它解释了应用程序实例和根组件实例之间的区别。

https://v3.vuejs.org/guide/instance.html