Question

我想制作一个标签和树视图的递归组合。看看下面的简单示例，看看它是否正常工作：

＆＃13;

Vue.component('tabs', {
  template: '#tabs',
  data(){
    return {
      tabs:[],
      expanded:true,
    };
  },
  mounted(){
    for (i = 0; i < this.$slots.default.length; i++) {
      let tab = this.$slots.default[i];
      if (tab.componentOptions && tab.componentOptions.tag == 'tab') {
        this.tabs.push(tab.componentInstance);
      }
    }
  }
});

Vue.component('tab', {
  template: '#tab',
  props: ['label']
});

app = new Vue({
  'el': '#inst',
});

＆＃13;

<!-- templates -->
<script type="text/x-template" id="tabs">
  <div @click.stop="expanded = !expanded">
    <h1><slot name="h" /></h1>
    <div v-if="expanded" class="children">
      <ul><li v-for="tab in tabs">{{tab.label}}</li></ul>
    <div style="border:1px solid #F00"><slot /></div>
  </div>
</script>
<script type="text/x-template" id="tab">
  <strong><slot /></strong>
</script>

<!-- data -->
<tabs id="inst">
  <div slot="h">Woot</div>
  <tab label="label">
    <tabs>
      <div slot="h">Weet</div>
      <tab label="sub">Weetley</tab>
  </tab>
  <tab label="label2">Woot3</tab>
</tabs>

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.3.3/vue.min.js"></script>

＆＃13;

所以现在我有标签分开的标签，我可以在标签上添加一些活动状态并完成。

除了为了获取标签以便我可以遍历它们以在父母中制作标签，我循环浏览this.$slots.default以找到标签。问题是，当我将展开的默认值更改为false时，v-if触发器和componentInstance永远不会被填充。

我不想使用v-show，因为使用vue的全部原因是为了抵消巨大DOM和显示器的性能损失（以前实现的方式如何）。如何将我的子组件放入我的数据中？

Answer 1

所以你需要它开始扩展，并且在mounted运行之后，将扩展设置为其预期的初始值：

Vue.component('tabs', {
  template: '#tabs',
  data() {
    return {
      tabs: [],
      defaultExpanded: false,
      expanded: true,
    };
  },
  mounted() {
    for (const tab of this.$slots.default) {
      if (tab.componentOptions && tab.componentOptions.tag == 'tab') {
        this.tabs.push(tab.componentInstance);
      }
    }
    this.expanded = this.defaultExpanded;
  }
});

Vuejs：获取插槽内容componentInstances由于`v-if`而未呈现

1 个答案: