Question

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

2017-03-15

5138

vue.js

我正在使用 Vue 1.0。

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

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

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

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

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>