new vue 动态创建子组件，插入DOM，销毁等操作_vue 动态子组件

创建
前提：父级组件中，动态创建子组件，页面只做size响应，其他数据不响应

emptyChart:组件
props：传参
on：事件监听
  const initEmptyChart = new Vue({
        render(h) {
          return h(emptyChart, {
            props: {
              itemId: rowId + '-' + 'col' + colId,
              rowId: rowId,
            },
            on: {
              remove: (rowId, itemId) => {
                that.remove(rowId, itemId)
              },
              removeRow: rowId => {
                that.removeRow(rowId)
              }
            }
          })
        }
      })
      const initChartInstance = initEmptyChart.$mount()
      this.$refs[rowId + '-' + 'col' + colId] = initChartInstance.$children
      // 手动将子组件实例添加进父组件实例中
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

插入DOM

documen.body.appendChild(initChartInstance.$el)
1

在父级中手动显式销毁实例

remove(itemref){
  this.$refs[itemref][0].$destroy()
}
1
2
3