vue $children destory

开源之夏第三届火热来袭，高校学生参与赢万元奖金！>>>

最近在学习vue组件，遇到如下问题。

定义了Tabs组件如下:

<template>
    <div class="tabs">
      <div class="tabs-bar">
        <div v-for="(item,index) in navList" >
          {{item.label}}<button @click="handleClose(index)">关闭</button>
        </div>
      </div>
      <div class="tabs-content">
        <slot></slot>
      </div>
    </div>
</template>

定义了Pane组件如下：

<template>
    <div class="pane" v-show="show">
      <slot></slot>
    </div>
</template>

在App.vue中使用Tabs和Pane组件如下：

<template>
  <div id="app">
    <Tabs value="1">
      <Pane  label="标签1" name="1">标签一的内容</Pane>
      <Pane  label="标签2" name="2">标签二的内容</Pane>
      <Pane  label="标签3" name="3">标签三的内容</Pane>
    </Tabs>
  </div>
</template>

现在我在Tabs组件中调用this.$children[0].$destory()方法，为什么无法删除第一个Pane组件？