解决vue项目中遇到父组件的按钮或操作控制重新挂载子组件但是子组件却无效果的情况

在vue项目中终会遇到需要父组件的按钮或操作控制重新挂载子组件的需求，我在新项目中就遇到这种需求。真实场景是父组件的早，中，晚三个按钮（代表三个时间段）来控制子组件的table表格列的动态加载。

子组件的显示隐藏用指令v-if控制，点击父组件的三个按钮，可以控制子组件的显示隐藏，但是子组件不会重新执行生命周期，重新挂载；如图：没有操作按钮时

点击中按钮时，也没有刷新，如图;

 

就这个问题，在子组件加上key唯一项即可；

没改前，子组件使用代码：

<ob-tab v-if="showTab" :selectedDate="now" :classType="classType"></ob-tab> 改之后代码： <ob-tab v-if="showTab" :selectedDate="now" :classType="classType" :key="new Date().getTime()"></ob-tab> 只是给子组件加了:key="new Date().getTime()"的唯一值；下面看效果，如图：

 

 加入:key="new Date().getTime()"代码后，子组件的table可以正常重载了

 

标签：vue,操作控制,key,按钮,组件,挂载,如图
来源： https://www.cnblogs.com/Hellen-Sun/p/15222480.html