如何删除Vue中意外渲染的无props属性的组件实例？

• 你之前尝试的inheritAttrs: false是用来控制组件根节点是否继承未声明的HTML属性，和组件实例的渲染/删除逻辑无关，自然不会生效。
• 核心问题确实出在this.tabs = this.$children这个写法上：Vue的$children属于不推荐使用的内部API，不会过滤无props的实例，也不保证顺序稳定，甚至会把内部渲染生成的匿名子节点、插槽默认内容都算入统计，这就是你凭空多出索引4、5实例的原因。
• 另外注意到你在myTabScript中定义的数据源是items数组（共4个有效元素），但模板中循环TabHeader用的是in tabs，变量名不匹配也会导致渲染逻辑混乱。

1. 废弃$children，统一用自定义数据源控制渲染 #

不要通过$children自行收集子组件，所有渲染逻辑直接绑定你自己定义的响应式数据源即可，修改Tab.js基础逻辑：

export default {
  inheritAttrs: false,
  props: {
    // 直接接收父层传入的tab列表
    tabs: {
      type: Array,
      default: () => []
    }
  },
  // 删掉原来data中定义的tabs变量，以及created钩子中给tabs赋值的逻辑
//....
}

2. 修正模板循环逻辑，可添加过滤规则 #

如果要严格只渲染携带有效props的tab，直接在循环时添加过滤条件即可，修改myTabTemplate：

<div>
  <MyTab :tabs="items"> <!-- 把自定义的items数组传给MyTab组件 -->
    <TabHeader
      v-for="(tab, idx) in items.filter(item => item.title)" 
      <!-- 上面的过滤规则可自行调整，比如同时校验icon是否存在等 -->
      :key="idx"
      :title="tab.title"
      :icon="tab.icon">
      <h3>Heading {{idx + 1}}</h3> {{ tab.title}}
     </TabHeader>
  </MyTab>
</div>

3. 正确的组件删除逻辑 #

如果后续需要删除指定tab，直接操作数据源items即可，Vue会自动同步销毁对应的组件实例，不需要手动操作组件本身：

// 删除索引为n的tab示例
deleteTab(n) {
  this.items.splice(n, 1)
}

修改完成后，所有组件的渲染完全受你自定义的items数组控制，不会再出现额外的无props实例。

内容的提问来源于stack exchange，提问作者user16196981