学校网站建设讯息,注册域名之后如何建设网站,网站建设seo优化内蒙,管理网站开发教程原因
在Vue中#xff0c;props是从父组件流向子组件#xff0c;在子组件的mounted及之前的生命周期钩子中#xff0c;子组件只能接收到父组件的第一次props#xff0c;如果父组件的props改变了#xff0c;那么子组件在以上这些生命周期钩子中是接收不到的#xff0c;那么…原因
在Vue中props是从父组件流向子组件在子组件的mounted及之前的生命周期钩子中子组件只能接收到父组件的第一次props如果父组件的props改变了那么子组件在以上这些生命周期钩子中是接收不到的那么最好的解决办法当然就是在子组件中采用watch来侦听peops的变化。
如下有一个案例是我在实际开发中遇到的记录下来以防再次踩坑
案例
子组件A
子组件是elementUI中的tree组件首先通过向后端获取数据来得到tree的数据然后拿到父组件传递过来的props进行勾选状态回显
const { state } useAsyncState(() getAllMenuTree(),{ data: [] },{onSuccess(res) {if (res) {//子组件通过useAsyncState来获取树形数据console.log(props.checkedKeys,props.checkedKeys);//然后拿到父组件传递过来的props进行setCheckedKeystreeRef.value?.setCheckedKeys(finalKeys);}},},
);
父组件B
父组件B也使用useAsyncState方法获取数据然后把数据中需要回显的数据传递给子组件A 此时props发生了变化
templateFilterOrCheck :checkedKeyscheckedKeys
/template
const checkedKeys refstring[]([]);
const { state, execute } useAsyncState(() getAuthDetail(paramsQuery.value),{data: {},},{onSuccess(res) {if (res.code ResDataCodeEnum.SUCC_0) {checkedKeys.value res.data.menuIds || [];}},},
);
父组件C 父组件C和B一样也是同样的操作
templateFilterOrCheck :checkedKeyscheckedKeys
/template
const checkedKeys refstring[]([]);
const { state } useAsyncState(() getPosDetail(postId.value),{ data: {} },{onSuccess(res) {checkedKeys.value res.data.menuIds || [];},},
);
这个案例的结果是在父组件B使用子组件A时子组件A打印出来的props.checkedKeys是有值的但是父组件C使用子组件A的时候子组件打印出来的是一个空数组这是为何
原因是因为父组件B和C他们都是在获取数据之后才改变props的而A组件也是在获取数据之后才打印props的如果A组件获取数据的时间比较长那么在A组件获取到数据的时候父组件已经获取到数据并传递props给A了所以A打印出来的props是有的反之就是没有的所以解决办法就是为了以防万一再加上一个watch即可
