Vue 动态组件介绍

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);