Vue两种组件类型介绍：递归组件和动态组件

一递归组件

递归组件的特性就是可以在自己的template模板中调用自己本身。值得注意的它必须设置name属性。

// 递归组件 recursive.vue
<template>
  <div>
    <p>递归组件</p>
    <Recursion :count="count + 1" v-if="count < 3"></Recursion>
  </div>
</template>

<script>
  export default {
    name: "Recursion",//必须设置name属性
    props: {
      count: {
        type: Number,
        default: 1
      }
    }
  }
</script>

这个例子中父页面使用该递归组件会调用三次recursive组件，值得注意的是递归组件必须设置递归次数限制数量

否则会抛出错误，该例子中通过count来限制递归次数。

二 动态组件

　如果将一个Vue组件命名为Component会报错，因为Vue提供来特殊的元素<component>来动态挂载不同组件。

　 并使用is特性来选择要挂载的组件。

// parentComponent.vue
<template>
 <div>
    <h1>父组件</h1>
    <component :is="currentView"></component>
    <button @click = "changeToViewB">切换到B视图</button>
 </div>
</template>

<script>
  import ComponentA from '@/components/ComponentA'
  import ComponentB from '@/components/ComponentB'
  export default {
   components: {
      ComponentA,
      ComponentB
    },
   data() {
      return {
        currentView: ComponentA // 默认显示组件 A
      }
    },
    methods: {
      changeToViewB () {
        this.currentView = ComponentB // 切换到组件 B
      }
    }
  }
</script>


通过改变currentView的值就可以动态切换显示的组件，与之类似的是vue-router的实现原理，前端路由到不同的页面实际上就是加载不同的组件。