vue3 项目的父子组件挂载顺序调整

今天在开发的过程中遇到一个问题，记录一下解决的方法；

场景：父组件和子组件在页面展示内容，按照正常的生命周期顺序是 =》父组件创建=》子组件创建=》子组件挂载=》父组件挂载

但是，子组件在挂载的时候就要用到父组件提供的数据，这样就产生了问题，和正常的生命周期不符合，但是又必须要这么做。（其实这里也可以在子组件再请求一遍数据的，但是不能这么干，这么干会被自己的操作笑死），所以只能改变这个生命周期的执行顺序了。（方法也是借鉴了chatGpt 的）

在父组件中把数据通过provied 方法向下传递，然后，在子组件写一个async await 的延迟函数，然后再执行方法，

const { data, methods } = inject('parentData');// 这里接受的是传递过来的数据

const initData = async () => {

await new Promise((resolve) => {

setTimeout(() => {

resolve();

}, 1000); });

console.log(data.content); // 打印 'Hello' methods.sayHi(); // 输出 'Hi' };

onMounted(() => {

initData();

});