在 Vue 中，通常会将一个组件分成父组件与子组件，父组件用来管理数据，而子组件则用来展示界面，同时也可能需要使用一些父组件中的方法。然而，在 Vue 中，默认并不支持子组件直接调用父组件中的方法，这就需要我们去寻找解决方法。
在 ES9 中，新增了一种语法：async 方法。
使用 async 方法解决问题
可以在 Vue 中使用 async 方法来解决子组件无法使用父组件 methods 的问题。
首先，在父组件中定义一个 async 方法：
async parentMethod() {
// Your code here
}然后，在父组件中引用这个异步方法：
export default {
methods:{
async parentMethod() {
// Your code here
}
}
}接下来，在子组件中定义一个方法：
async childMethod() {
try {
await this.$parent.parentMethod()
} catch (error) {
console.log(error)
}
}childMethod 方法中使用 try-catch，因为我们无法确保父组件中的 async 函数是否全部执行成功。
在子组件中调用这个子方法：
<template> <button @click="childMethod">Click Me</button> </template>
这样，我们就可以在子组件中使用父组件中的方法了。
示例代码
下面列出了一个简单的示例代码：
-- -------------------- ---- -------
---- --- ---
----------
-----
--- ----------------- ------- -------
---------------- --
------
-----------
--------
------ -------------- ---- -------------------------
------ ------- -
----------- -
--------------
--
------ -
------ -
-------- ------ --------
-------- -----
-
--
-------- -
----- -------------- -
------------ - ----
-
-
-
---------
---- --- ---
----------
------- ---------------------------- -----------
-----------
--------
------ ------- -
-------- -
----- ------------- -
--- -
----- ---------------------------
- ----- ------- -
------------------
-
-
-
-
---------在这个示例代码中，我们在父组件中定义了一个名为 parentMethod 的 async 方法，并在子组件中调用了它。
总结
使用 ES9 中的 async 方法，我们可以很方便的实现子组件使用父组件的方法，提高了代码的可复用性和维护性。
当然，在使用 async 方法的时候，也需要注意异步导致的一些问题，如异常／错误捕获，等等。
希望我的这篇文章能够给你带来帮助，也欢迎大家在评论区给我留言，一起交流学习。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/646f357c968c7c53b0d9b12f