vue之动态组件

切换组件案例

点击一个tab-bar，切换不同的组件显示：

 

 

这个可以通过两种不同的思路来实现：

• 方式一：通过v-if来判断，显示不同的组件。
• 方式二：动态组件的方式。

（1）通过v-if来判断显示不同的组件

    <button v-for="item in tabs" :key="item"
            @click="itemClick(item)"
            :class="{active: currentTab === item}">
      {{item}}
    </button>
  

  <!-- 1.v-if的判断实现 -->
    <template v-if="currentTab === 'home'">
      <home></home>
    </template>
    <template v-else-if="currentTab === 'about'">
      <about></about>
    </template>
    <template v-else>
      <category></category>
    </template>

...
 export default {
    components: {
      Home,
      About,
      Category
    },
    data() {
      return {
        tabs: ["home", "about", "category"],
        currentTab: "home"
      }
}
...

 data函数定义的tabs为展示的组件名集合，currentTab为当前要显示内容的组件。 

（2）动态组件是使用 component 内置组件，里面一个特殊的attribute is 来实现

<component :is="currentTab"></component>

这个currentTab的值需要是什么内容呢？

• 可以是通过component函数注册的组件（全局）。
• 在一个组件对象的components对象中注册的组件（局部）。

传值和监听事件

只需要将属性和监听事件放到component上来使用即可：

<component :is="currentTab"
                 name="Messi"
                 :age="35"
                 @pageClick="pageClick">