组件上的触发代码 v-show=true

Question

我使用的是 Vue 1.0。

1. 我有一个带有标签的 UI。
2. 在每个选项卡中，都有一个组件应该加载自己的数据（通过 ajax）。
3. 我不想一次加载每个选项卡的组件数据。
4. 我只想加载一次数据。

如果我在组件上使用 v-if 并将加载代码放在 ready() 中，它会在每次选择选项卡时加载。这是因为 v-if 会破坏并重新创建组件。 v-if 是否有 keep-alive 等效项？

如果我使用 v-show，所有选项卡都会立即加载。当组件变得可见时是否有一个钩子？

编辑：因为 cmets 不断提到动态组件。我想强调我不能使用动态组件，因为选项卡需要不同的属性。

Answer 1

您可以将v-if 与v-show 一起使用。激活选项卡后，您可以在其上设置绑定到v-if 的属性。这使得标签加载。您不要取消设置该属性。

顶级属性跟踪当前显示的选项卡，您可以在 v-show 表达式中使用它。

在下面的示例中，每个选项卡在半秒延迟后“加载”启动时的当前时间。在标签之间切换时，您会看到每个标签都有自己的时间，不会在每次显示时重新加载。

var baseComponent = Vue.extend({
  data: function() {
    return {
      ajax: null
    }
  },
  created() {
    setTimeout(() => this.ajax = Date.now(), 500);
  }
});

Vue.component("tab-one", baseComponent.extend({
  template: `<div>Template for tab 1 {{ajax}}</div>`
}));

Vue.component("tab-two", baseComponent.extend({
  template: `<div>Template for tab 2 {{ajax}}</div>`
}));

Vue.component("tab-three", baseComponent.extend({
  template: `<div>Template for tab 3 {{ajax}}</div>`
}));

new Vue({
  el: '#app',
  data: {
    tabs: [{
        label: 'Tab 1',
        component: 'tab-one',
        wasLoaded: false
      },
      {
        label: 'Tab 2',
        component: 'tab-two',
        wasLoaded: false
      },
      {
        label: 'Tab 3',
        component: 'tab-three',
        wasLoaded: false
      }
    ],
    activeTab: null
  },
  methods: {
    activate: function(tab) {
      tab.wasLoaded = true;
      this.activeTab = tab;
    }
  }
});

<script src="//cdnjs.cloudflare.com/ajax/libs/vue/1.0.10/vue.min.js"></script>
<div id="app">
  <div>
    <div class="tabs">
      <button v-for="tab in tabs" @click="activate(tab)">
        {{ tab.label }}
      </button>
      <tab-one v-if="tabs[0].wasLoaded" v-show="activeTab === tabs[0]"></tab-one>
      <tab-two v-if="tabs[1].wasLoaded" v-show="activeTab === tabs[1]"></tab-two>
      <tab-three v-if="tabs[2].wasLoaded" v-show="activeTab === tabs[2]"></tab-three>
    </div>
  </div>
</div>