vue 自定义指令 获取el-tabs传值问题

Vue自定义指令可以帮助开发者扩展组件的功能，特别是在处理一些特定的行为或数据绑定时。当你需要从`el-tabs`组件获取传值时，通常会在自定义指令中定义一个监听`v-model`或者其他相关的值变化。

假设你有一个名为`custom-directive`的自定义指令，你可以这样做：

Vue.directive('myCustomDirective', {
  bind: function (el, binding, vnode) {
    // 当指令绑定到元素时
    el.addEventListener('tab-click', function (event) {
      let value = event.target.getAttribute('value'); // 从事件对象获取当前激活的tab值
      binding.value = value; // 将值更新到指令的属性上
    });
  }
})

然后在`el-tabs`组件中使用这个自定义指令，并传入一个`v-model`绑定的变量：

<template>
  <el-tabs v-my-custom-directive="activeTab">
    <el-tab-pane v-for="(item, index) in tabs" :key="index" :label="item.name" :value="item.id">
      <!-- 内容 -->
    </el-tab-pane>
  </el-tabs>
</template>

<script>
export default {
  data() {
    return {
      tabs: [
        { id: '1', name: 'Tab 1' },
        { id: '2', name: 'Tab 2' },
        // ...
      ],
      activeTab: null,
    };
  }
};
</script>

每当切换到新的tab时，`activeTab`就会被更新为对应的值。注意，这里的关键是`el.tabs`中的每个`tab`都需要有`value`属性用于标识。