在 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
| 归档时间: |
|
| 查看次数: |
4702 次 |
| 最近记录: |