基于VUE，Iview，在Tab选项卡中集成 wangeditor3组件，多个选项卡时，wangeditor 重复创建，无法编辑

Question

我在做一个后台的选项卡切换不同选项，添加不同面板，面板里面再添加不同vue组件

基本样式如下,这时候没问题

然后我再打开一个面板，也没有问题，效果如下

然后我再点击，点击，点击，注意是直接点击 ‘写文章’ 选项卡，回到 ‘写文章’ 页面，问题就来了，具体显示如下

是不是觉得看着没问题，可惜，问题大了，现在无法编辑，而且默认显示的文章也不见了，不过文章分类和标题的输入框可以正常使用，也就是说，只有wangeditor那部分出问题了，而且我在write_article.vue（写文章选项卡加载的vue组件）中的mounted中打了个日志

日志输出如图

write_article.vue中

mounted(){
  console.log("write_article : mounted 正在执行");
      //这句不能加，加了反而不会显示
    // var E = window.wangEditor
    let editor = new E('#editorMenu', '#editorContent');
    //加上这个句，才能在编辑器中粘贴图片
    editor.customConfig.uploadImgShowBase64 = true;
    editor.customConfig.uploadImgMaxSize = 3 * 1024 *1024;
    editor.customConfig.uploadFileName = 'file';
    // 通过 url 参数配置 debug 模式。url 中带有 write 才会开启 debug 模式
    editor.customConfig.debug = location.href.indexOf('write') > 0
    //监听编辑器内容变化，并赋给editorContent
    editor.customConfig.onchange = (html) => {
      this.editorContent = html
    };
    editor.create()
  }
  

### 按理来讲应该只显示一次，可这里打出了两次，而且经过实验证明，打开了多少个选项卡面板，F5刷新之后，这段日志就会输出多少次，不知道什么原因，一会儿贴代码，我先描述完问题

但如果我正常点击选项卡上的 ‘ X ’ 的符号来关闭选项卡的话，到了 ‘写文章’ 这个面板的时候，又没有问题，能正常显示emmmmmmm.......

而且如果从头至尾就只有一个 ‘写文章’ 这个选项卡的时候，F5刷新没问题，有多个选项卡打开的时候，在 '写文章' 选项卡页面 再按F5刷新就又出现了一个问题，显示效果如下

奇怪的问题是，第一个红框，无法编辑，第二块红框却能编辑emmmmmmm，日志同样又多次输出，我觉得就是wangeditor创建的问题，我不晓得是我加载组件的方式有问题，还是有什么不兼容，希望大家帮忙看一下，下面我贴具体的加载组件的代码

这个是 Tabs 的点击时实现的方法，就是上面说到的 直接点击 选项卡标题，

<Tabs class="style-tab" type="card" v-model="activeIndex" closable @on-tab-remove="removeTab" @on-click="TabClick">

//实现点击面板，传递子菜单
    TabClick:function(){
      var path = '/404';
      for (var i = 0 ;i<this.submenuList.length;i++){
        for (var j = 0;j<this.submenuList[i].childList.length;j++){
          if (this.submenuList[i].childList[j].child_index === this.activeIndex){
            path = this.submenuList[i].childList[j].to_path;
          }
        }
      }
      console.log('TabClick '+this.intI++);
      this.$router.push({name:path})
    },

这个是Tab 选项卡 关闭时触发的内容，就是上面说的，点击那个 选项卡标题旁 ‘x’ 的时候触发的

 //删除指定tab标签的内容
    removeTab(childIndex) {
      var path = 'ServiceController';
      this.openNames.remove(childIndex);
      /** 勿删 **/
      let tabs = this.editableTabs;
      this.editableTabs = tabs.filter(tab => tab.index !== childIndex);

      for (var i = 0 ;i<this.submenuList.length;i++){
        for (var j = 0;j<this.submenuList[i].childList.length;j++){
          if (this.submenuList[i].childList[j].child_index === this.activeIndex){
            path = this.submenuList[i].childList[j].to_path;
          }
        }
      }
      console.log('removeTab '+this.intI++);
      this.$router.push({name:path})
    },
    

这个是我实现F5刷新的时候，判断是否 有记录打开的面板的 操作，并且加载 正在显示的 选项卡的内容

      //此钩子中函数一般会做一些ajax请求获取数据进行数据初始化，mounted 在整个实例中只执行一次
  mounted:function () {
    var open = localStorage.getItem("open-names");
    var active = localStorage.getItem("active-name");
    if (null != open){
      // console.log("初始化的 openNames value:"+this.openNames);
      this.openNames = open.split(",");
      // console.log("初始化后的 openNames value:"+this.openNames+' openNames 长度：'+this.openNames.length);
      for (var i=0;i<this.openNames.length;i++){
        // console.log(" 正在处理： "+this.openNames[i]);
        for (var j=0;j<this.submenuList.length;j++){
          for (var k=0;k<this.submenuList[j].childList.length;k++){
            //如果储存的openNames中有，则添加到面板上
            if (this.submenuList[j].childList[k].child_index === this.openNames[i]){
              // console.log("成功找到："+this.submenuList[j].childList[k]);
              this.editableTabs.push({
                title: this.submenuList[j].childList[k].child_title,//选项卡标题
                index: this.submenuList[j].childList[k].child_index, //选项卡的编号
                content: this.submenuList[j].childList[k].to_path,//可以是路径
              });
              //如果该面板同时是正在显示的面板，则跳转到该页面上
              if (this.submenuList[j].childList[k].child_index === active){
                console.log('mounted '+this.intI++);
                this.$router.push({name:this.submenuList[j].childList[k].to_path});
                this.activeIndex = active;
              }
            }
          }
        }
      }
    }else {//表示没有打开的选项卡，自然也没有正在显示的选项卡，则重新定位到ServiceController主页
      console.log('mounted '+this.intI++);
      this.$router.push({name:"ServiceController"})
    }
  },
  

具体的实现的代码都在这里了，希望有大佬帮忙看看，说真的，有点多，但还是希望大佬能静下心来仔细看看，我看了好长时间，无奈太菜，学习中就遇到这多多问题emmmmmm.......

Answer 1

惭愧，刚发布不久我就解决了这个问题
我先说下我的解决方法

自此，以上所述bug消失了，对，就这样消失了
eeeeeeeeemmmmmmmmmmmmmmmmmmm.......

不过我还是不太理解这里绑定id和用ref的区别，如果有大佬晓得，请在下面留个言

最后我还有个问题，日志中的 那句 write_article : mounted 正在执行
还是会有多少个选项卡打开，就会输出多少次，就只剩这个问题了