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

Question

我们可以移除/删除 Vue 意外渲染的非 props 组件实例吗？ 我尝试使用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;
    })
  }