大众汽车网站建设,贵港公司做网站,会考网页制作视频教程全集,网上购物商城er图1. 使用场景
我们在子组件中通常需要调用父组件的数据#xff0c;此时需要使用 vue3 的 props 进行父子组件通信传值。
2. 问题描述
那么此时问题来了#xff0c;在使用 props 进行父子组件通信时#xff0c;因为数据传递是异步的#xff0c;导致子组件无法成功获取数据…1. 使用场景
我们在子组件中通常需要调用父组件的数据此时需要使用 vue3 的 props 进行父子组件通信传值。
2. 问题描述
那么此时问题来了在使用 props 进行父子组件通信时因为数据传递是异步的导致子组件无法成功获取数据若此时父组件中数据发生变化那子组件获取的值是改变之前的数据。
举个 父组件中有一个 tab 进行切换导航下面的输入框区域为子组件“个人” clueScope 为 1“团队” clueScope 为 2将父组件中的 clueScope 通过 props 传递给子组件此时会出现下面的结果 最开始控制台输入一行“个人”的 clueScope接下来我们点击“团队”输出 1点击“个人”输出 2原因是我们在子组件获取的是父组件传递的数据更新之前的值意识到这个很重要。
这么说有点抽象简单看一下局部的代码
父组件
const queryForm ref({clueScope: 1, // 默认为 个人 -- 1}
)
const ChildRef ref();
const renderTab () (divElTabs v-model{queryForm.value.clueScope} onTabChange{handleChangeTab}ElTabPane label个人 name1 /ElTabPane label团队 name2 //ElTabs/div
);
// 切换 tab
const handleChangeTab () {ChildRef.value.resetForm();
;
return () (div class{renderTab()}ChildCompref{ChildRef}clueScopeType{queryForm.value.clueScope}//div
);
子组件使用 expose 抛出方法让父组件进行调用。
props: {clueScopeType: {type: Number,default: ClueListTabEnum.个人私池,},
},
const resetForm () {console.log(props.clueScopeType, type);
}
expose({resetForm,
});
此时就会出现上述问题。
3. 原因
使用 props 进行父子组件通信时子组件异步获取父组件传递的数据也就是说子组件还未获取父组件改变之后的数据就已经开始执行函数输出的就是父组件改变之前的值因此无法成功渲染数据拿到真实值。
4. 解决方法
方法一watch
最常见的方法就是使用 watch 进行监听当数据发生改变之后在执行某项操作。
// 子组件添加 watch
watch(() props.clueScopeType, (newValue) {console.log(props.clueScopeType, type);
})注意 ⚠️
一般在实际项目开发中不建议使用 watch因为后续可能会有其他的功能也涉及到 tab 的变化做一些操作这样可能会出现逻辑上的耦合如果我们把多个相互不耦合的函数都放在一个 watch 里面那监听的变量越来越多这个 watch 函数也会越来越大越来越不好控制违背了程序的初衷。
方法二传递参数
沿用刚刚的 resetForm 方法进行修改。
我们在父组件中传递具体的参数值子组件中可以顺利获取原因是在调用函数的时候父组件传递的值一定是改变后的值那么子组件获取的也一定是真实的值。
// 父组件
// 切换 tab
const handleChangeTab () {RouteSearchRef.value.resetForm(queryForm.value.clueScope);
};
// 子组件
const resetForm (type) {console.log(type, type);
}
expose({resetForm,
})
以上两个方法都可以成功解决大家可以根据实际问题具体选择哪一种。
