如何从 Vue.js 3 中的 App 对象外部调用方法?

Edw*_*uay 4 vuejs3

在 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>
Run Code Online (Sandbox Code Playgroud)

但是 Vue.js 3 中的上述代码出现错误:

未捕获的类型错误:app.initialize 不是函数

我如何在 Vue.js 3 中做到这一点?

ski*_*tle 13

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

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

const vm = app.mount("#app");
vm.initialize();
Run Code Online (Sandbox Code Playgroud)

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

文档中有一个这样的例子:

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

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

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