Vue 递归、动态、异步组件

前面的话

前面介绍的提到的内联模板也是属于组件高级用法，在实际业务中不是很常用，但是在独立组件开发时可能会用到。

递归组件

组件在它的模板内可以递归地调用子，只要给组件设置name选项就可以了。

 <div id="app1">
        <parent-component></parent-component>
  </div>
  <script>
	 var childNode = {
         name: "child-component",
        props:{
            count:{
                type: Number,
                default: 1
            }
        },
        
        template: `
        <div class="child">
            <child-component v-if="count < 3" :count="count + 1"></child-component>   
        </div>
        `
    }
    var parentNode = {
        template: `
        <div class="parent">
        <child-component :count="1">
        <p>分发内容</p>
        </child-component>
        </div>`,
        components: {
            "child-component": childNode
        }
    }
    var app1 = new Vue({
        el: '#app1',
        components: {
            "parent-component": parentNode
        }
    })
</script>

动态组件

Vue.js提供了一个特殊的元素用来动态地挂载不同的组件，使用is特性来选择要挂载的组件。

 <div id="app2">
        <component :is="currentView"></component>
        <button @click="handleChangeView()">切换页面</button>     
    </div>
 <script>
 var app2 = new Vue({
        el: '#app2',
        components: {
            comA: {
                template:  `
                <div>组件A</div>
                `
            },
            comB: {
                template: `
                <div>组件B</div>
                `
            },
            comC: {
                template:`
                <div>组件C</div>
                `
            }
        },
        data: {
            index: 0,
            arr: ['comA','comB','comC'],
        },
        computed: {
            currentView () {
                return this.arr[this.index] 
            }
        },
        methods: {
            handleChangeView() {
                 this.index = (++this.index) % 3;
            }
        }    
    })
</script>

异步组件

当工程足够大时，使用的组件足够多时，是时候考虑下性能的问题了，因为一开始把所有的组件都加载是没有必要的一笔开销。 Vue.js允许将组件定义为一个工厂函数，动态的解析组件。Vue.js只在组件需要渲染时触发工厂函数，并且把结果缓存起来，用于后面的再次渲染。

<div id="app3">
        <child-component></child-component>
 </div>
 <script>
    Vue.component('child-component',function (resolve, reject) {
        window.setTimeout(() => {
            resolve({
                template: `<div>我是异步渲染的</div>`
            })
        }, 2000);
    });
    var app3 =  new Vue({
        el: '#app3'
    })
</script>

工厂函数接受一个resolve回调，在收到从服务器下载的组件定义时调用。也可以调用reject（reason）指示加载失败。这里setTimeout只是为了演示异步，具体的下载逻辑可以自己决定。

关于异步组件后面还会单独的详细介绍。