vue.js - 组件上触发代码 v-show=true

Question

我使用的是 Vue 1.0。

1. 我有一个带有选项卡的用户界面。
2. 在每个选项卡中，都有一个应加载自己的数据(通过 ajax)的组件。
3. 我不想一次加载每个选项卡组件的数据。
4. 我只想加载一次数据。

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

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

编辑:因为评论一直提到动态组件。我想强调的是我不能使用动态组件，因为选项卡需要不同的属性。

Answer 1

您可以将v-if 与v-show 一起使用。当激活选项卡时，您可以在其上设置绑定(bind)到 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>