如何删除 vue 非 props 组件实例？

Question

我们可以 remove/delete Vue 意外渲染的非道具组件实例吗？我试过使用 inheritAttrs: false（但是是的，不包含在组件道具和发射属性中），或者 deleteThisComponent(idx{this.idx.splice(this.idx.indexOf(idx, 1))} 但它没有用。

我需要删除它们，因为它不应该存在，在我的例子中，它应该只是带有渲染道具的组件实例。请参阅下面的 Vue 组件检查。

P.S我想删除4和5，他们没有任何道具。即使我没有为索引 4 和 5 的数据属性设置任何值。

这是我的非工作代码，在 MyTab.html 上它更像骨架

<div class="tab__header">
      <a
        v-for="(tab, idx) in tabs"
        v-bind="$attrs"
        :class="class(idx)"
        :key="idx"
        tabindex="0">
        <span class="tab__icon" v-if="hasIcon">
          <component :is="tabTitle.icon" />
        </span>
        {{ tabTitle.title}}
      </a>
    </div>

并以Tab.js为基础js.

export default {
  inheritAttrs: false,
  data() {
    return {
      tabs: []
    }
  },
  created() {
    this.tabs = this.$children //I also wonder, is the problem is from here or not? Since normal Javascript patterns here used to get all of the children.
  }
//....
}

这里是 tab.js 以包含模板和数据属性,

//....
myTabTemplate: `
 <div>
   <MyTab>
     <TabHeader
       v-for="(tab, idx) in tabs"
       :key="idx"
       :title="tab.title"
       :icon="tab.icon">
       <h3>Heading {{idx + 1}}</h3> {{ tab.title}}
      </TabHeader>
   </MyTab>
 </div>
`,
myTabScript: {
 data () {
   return {
     items: [
      {
       icon: `User`,
       title:'First Tab'
      },
      {
       icon: `Wishlist`,
       title:'Second Tab'
      },
      {
       title:'Third Tab'
      }, 
      {
       title:'Fourth Tab'
      }
     ]
   }
 }
},

Answer 1

您可以在分配给 v-for 的资源之前添加过滤条件。

你的例子：

tab.js

  created() {
    this.tabs = this.$children.filter(child => {
        const hasProps = !!child.$options.props;
        return hasProps;
    })
  }

如何删除 vue 非 props 组件实例？

How to remove vue non-props component instance?

javascript

vue.js

vue-component