【踩坑】element-plus el-tag 动态编辑标签 使用v-if后，ref获取不到input组件

组件通过v-if控制显示和隐藏，使用ref无法获取该组件

如果改用v-show来代替v-if的话，可能会出现一些bug。比如，控制组件的flg没有变化的话，第二次访问组件时，组件不会隐藏。所以，用v-show来代替v-if并不是一个很好的解决方案。

除了核心功能默认内置的指令 (例如 v-model 和 v-show)，Vue 也允许注册自定义指令。注意，在 Vue 中，代码复用和抽象的主要形式是组件。然而，有的情况下，你仍然需要对普通 DOM 元素进行底层操作，这时候就会用到自定义指令。

上面是Vue文档中一段话，所以我们想，可不可以用自定义指令来解决这个问题。

directives: {
  // 注册一个局部的自定义指令 v-focus
  focus: {
    // 指令的定义
    mounted(el) {
      // 获取input，并调用其focus()方法
      el.querySelector('input').focus()
    }
  }
}

我们在组件注册了一个局部指令v-focus，该指令可以直接作用在el-input组件

<el-input
   v-if="inputVisible"
   v-model="inputValue"
   v-focus
   class="input-new-tag"
   size="mini"
   @blur="hideInput"
   @="saveInput"
 >
 </el-input>

因为使用了v-focus指令，在inputVisible变成true时，便会调用自定义指令中的内容，即input自动聚焦。