以Vue提供了一个内置组件keep-alive来缓存组件内部状态,避免重新渲染。(在开发Vue项目的时候,有一部分部分组件是没必要多次渲染的)
一般用来使用在,路由不改变,但是组件内部内容改变的情况
可以结合elementui的el-radio-group组价使用
<div class="whiteBackground tradeInfoMaintain">
<el-radio-group
v-model="tabAction"
class="tabHeader"
size="medium"
@change="clicktTabHeader"
>
<el-radio-button label="8">项目类产品交易</el-radio-button>
<el-radio-button label="9">组合类产品交易</el-radio-button>
</el-radio-group>
<div class="tabBody">
<!--动态加载组件-->
<transition name="component-fade" mode="out-in">
<component :is="currentNode" ref="info"></component>
</transition>
</div> </div>
import combination from './combination';
import projectType from './projectType';
const currentNodeMap = {
8: projectType, // 项目类产品交易 根据字段
9: combination
};
data() {
return {
tabAction: '',
currentNode: projectType
};
},
methods: {
clicktTabHeader(node) {
this.$store.commit('financeAfterManage/getTabAction', node);
this.currentNode = currentNodeMap[node];
}
}
对应两个子组件会增加两个生命周期
activated:可以在该生命周期做ajax的请求 在 keep-alive 组件激活时调用
deactivated: 在 keep-alive 组件停用时调用