Vue3中父组件切换行后，子组件如何正确切换tab页？

本文共计597个文字，预计阅读时间需要3分钟。

问题描述：父组件切换行，子组件切换tab，子组件内的数据不刷新。

具体说明：例如，父组件为订单，子组件为订单相关的商品和客户。使用tab选项卡组织商品和客户。当tab切换到商品页时，无需刷新数据。

问题描述

父组件切换行，然后子组件切换tab，子组件内的数据不刷新。
例如父组件为订单，子组件为订单相关商品和相关客户，商品和客户使用tab选项卡组织。
当tab显示商品页时，切换订单，商品页内容跟着切换，然后切换到客户，客户页显示的却不是当前订单的子信息。

解决办法 为子组件所在的tabPane添加forceRender属性

添加该属性后，即使这个tabPane没有显示，也会进行渲染。

<a-tab-pane tab="订单客户" key="2" forceRender> 响应tabs的tabchange事件

添加forceRender将增加服务压力，例如用户仅关注商品页内容时，不断切换订单，查询订单客户的信息是没有意义的。
响应tabchange事件，当tabchange时，查询当前tabpanel下的记录，这样避免无意义的渲染。