VUE——组件（四）组件的高级用法

一、递归组件

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

    <div id="app">
        <child-component :count="1"></child-component>
    </div>
    <script type="text/javascript">
        Vue.component('child-component',{
            name:'child-component',
            props:{
                count:{
                    typeof:Number,
                    default:1
                }
            },
            template:'<div class="child">                <child-component                 :count="count+1"                 :v-if="count<3"                ></child-component>                </div>'
        })
        var app = new Vue({
            el: '#app',
            data: { },
            methods:{}
        })
    </script>

　　递归组件可以用来开发一些具有未知层级关系的独立组件，比如级联选择和树形控件等。

二、内联模板

三、动态组件

Vue提供联一个特殊的元素<component>用来动态地挂载不同的组件，使用is特性来选择要挂载的组件

    <div id="app">
        <component :is="currentView"></component>
        <button @click="handelChangeView('A')">切换A</button>
        <button @click="handelChangeView('B')">切换B</button>
        <button @click="handelChangeView('C')">切换C</button>
    </div>
    <script type="text/javascript">
        var app = new Vue({
            el: '#app',
            data: {
                currentView:'comA'
             },
            components:{
                comA:{
                    template:'<div>组件A</div>'
                },
                comB:{
                    template:'<div>组件B</div>'
                },
                comC:{
                    template:'<div>组件C</div>'
                }
            },
            methods:{
                handelChangeView:function(com){
                    this.currentView = 'com'+com
                }
            }
        })
    </script>

　　动态的改变currentView的值就可以动态挂载组件了。

四、异步组件

当你的工程足够大，使用的组件足够多时，就要考虑性能问题，如果一开始就把所有的组件都加载是没必要的。

vue将组件定义为一个工厂函数，动态地解析组件。Vue只在组件需要渲染时触发工厂函数，并把结果缓存起来，用于再次渲染。