vue $children destory

用技术充实自己 发布于 2021/02/07 16:24
阅读 284
收藏 0

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

最近在学习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组件?

加载中
0
gammey
gammey

你这是jquery还是vue?你可以给panel1绑定个属性

OSCHINA
登录后可查看更多优质内容
返回顶部
顶部