Vue 动态组件介绍

Question

Vue 的 component 组件 可以根据数据的状态动态呈现不同的组件。is 属性是你如何分辨 component 要渲染什么组件。 例如，下面是一个简单的选项卡 UI：

上面的标签式 UI 由 3 个不同的 Vue 组件组成 ： home、about 和 contact。

Vue.component('home', {
  template: '<div>This is the home tab</div>'
});
Vue.component('about', {
  template: '<div>This tab talks about us</div>'
});
Vue.component('contact', {
  template: '<div>This tab provides contact info</div>'
});

使用 component 和 :is，Vue 可以根据状态渲染不同的组件 tab：

<component class="tab-content" :is="tab"></component>

每当 tab 变化，Vue 会改变渲染的组件。 下面是处理状态的完整 Vue 应用程序 tab。

const app = new Vue({
  data: () => ({ tab: 'home' }),
  methods: {
    selected: function(tab) {
      return tab === this.tab ? 'selected' : '';
    }
  },
  template: `
    <div>
      <div class="buttons">
        <button @click="tab = 'home'" :class="selected('home')">
          Home
        </button>
        <button @click="tab = 'about'" :class="selected('about')">
          About Us
        </button>
        <button @click="tab = 'contact'" :class="selected('contact')">
          Contact Us
        </button>
      </div>
      <component class="tab-content" :is="tab"></component>
    </div>
  `
});
app.$mount('#vue-tab-example');