element UI排坑记(一)：判断tabs组件是否切换

之所以将这个问题列在排坑记之中，是因为官方组件的一个属性颇有些隐蔽，这个问题曾经折腾了本人较多时间，始终思维固着，且使用搜索引擎也不容易搜索到答案，故记之。然而实际解决却是相当简单的。

一、问题描述

在element UI的tabs组件中，假设需要在tab切换时执行某个函数，有什么方案？


二、问题举例

有两个tab，tab1和tab2，两个tab都有一个el-select组件，分别是el-select1和el-select2。el-select1和el-select2绑定了同一个字段，但是两者的下拉选项不相同。在切换tab时将导致以下问题:

1. 显示tab1中内容时，a的值是el-select1中某一下拉选项的值，但这个值在el-select2中不存在；反过来切换也是一样。
2. 这将使得切换tab时，el-select1或者el-select2中出现错误的下拉选项。


三、常用误区：通过事件解决

最容易想到的是采用tab-clik事件，但它的两个回调参数无法获取到切换前的tab实例，因此无法判断是否发生了tab切换。

四、解决方案：

采用before-leave钩子，它是el-tabs的一个一个属性，注意是属性而不是事件。给该属性绑定一个函数，则在触发tab切换时将执行绑定的函数。该钩子将在tab-clik之前执行。

它和tab-click的区别可总结如下：
1. tab-click在点击tab时就会触发，不论是否切换tab。
2. before-leave只在tab切换时触发。
3. 两者都触发时，before-leave先触发。


五、代码案例

<el-tabs :before-leave='leaveTab'>
<el-tab-pane label="主合同" name="False"></el-tab-pane>
<el-tab-pane label="子合同" name="True"></el-tab-pane>
</el-tabs> leaveTab(activeName, oldActiveName) {
// do something
},
```