本文探讨了在Vue中如何使用回调函数和Promise进行异步通信。在父组件中定义了一个方法，该方法接收参数并使用setTimeout模拟异步操作，然后将处理后的结果通过回调函数返回。在子组件中，通过$emit触发事件并传递参数，接收到处理结果后进行打印。同时，文章也展示了如何将回调函数替换为Promise，使得异步处理更加直观和易于理解。
// 可以使用回调的方法
// 父页面
// 父页面调用组件的html 中 添加事件 @test="test"
methods : {
test(data, cab) {
setTimeout(() => {
// 这里使用定时器 模拟执行完方法
console.log(data) // 这是传递过来的参数 用于处理
data++
cab(data) // 将处理完成的数据返回回去
}, 2000)
}
}
// 子页面
this.$emit('tset', 1, (res)=> {
console.log(res) // 2秒后会执行这一句 打印2
})
// 我们也可以用 Promise 的方法代替 回调
methods : {
test(data) {
return new Promise((resolve)=>{
setTimeout(() => {
// 这里使用定时器 模拟执行完方法
console.log(data) // 这是传递过来的参数 用于处理
data++
resolve(data) // 将处理完成的数据返回回去
}, 2000)
})
}
}
// 子页面
const res = await this.$emit('tset', 1)
console.log(res) // 2秒后会执行这一句
扫一扫
1055
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
