vue动态插入和移除组件

例子：

业务需求 页面有N个input标签,每个input获取焦点的同时在input下方显示一个组件快捷输入

常见方式
使用v-if,在遍历input的时候,同时也遍历快捷输入的组件。但是每个快捷输入的组件都需要一个变量去控制显示/隐藏。如果页面input数量多，就很麻烦。
解决方法
使用 Vue.extend() 创建一个组件构造器。

import Vue from 'vue';
import arrowBox from '../base/arrowBox.vue';
let arrowContent = Vue.extend(arrowBox);

在input获取焦点事件的回调函数传入$event参数

 <input @focus.capture="inFocus(item,$event)" type="text" v-model="item.inValue" @keyup="valFormat(item)">
 <script>
    inFocus(item,event){
       ********
        let component = new arrowContent({
            propsData:{
              item:item,
              inputDom:event,
              inVals:sessionStorage.getItem('_q').split(",")
            }
          }).$mount();
          //使用 vm.$mount() 手动地挂载一个未挂载的实例
          event.target.after(component.$el);
          //把挂载后的component插入
       ********
	}
 </script>

移除插入组件

event.path[1].removeChild(event.path[1].getElementsByClassName('arrowBox')[0])