解决vue3.0中 provide/inject的异步传递问题
备注：provide/inject都必须在setup中使用
1. 同步使用
祖先组件
import { ref, provide } from 'vue'
export default {
setup() {
const msg = ref('')
provide('msg', msg)
}
}
孙子辈组件
import { inject } from 'vue'
export default {
setup() {
const msg = inject ('msg')
return { msg }
}
}
2. 异步使用
祖先组件
import { ref, provide } from 'vue'
export default {
setup() {
// 逻辑就是先发射出去，然后再异步中改变值，这样祖孙组件就可以接收到了
const msg = ref('')
provide('msg', msg)
// 异步处理
setTimeout(() => {
msg.value = '收到一条消息';
}, 3000)
}
}
孙子辈组件
import { inject } from 'vue'
export default {
setup() {
const msg = inject ('msg')
return { msg }
}
}
