2019-02-18 vue组件基础篇6

• 组件高级用法
  递归组件

组件在它的模板内可以递归地调用自己，只要给组件设置name的选项就可以了。设置name后，在组件模板内就可以递归使用了，不过需要注意的是，必须给一个条件来限制递归数量，否则会抛出错误：max stack size exceeded。

<div id="app">
        <child-component :count="1"></child-component>
</div>
<script>
        Vue.component('child-component', {
            name: 'child-component',
            props: {
                count: {
                    type: 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'
        })
</script>

内联模板

在自定义组件中添加inline-template,组件就会把其内容当做template模板。
在父组件中声明的数据message和子组件中声明的数据msg，两个都可以渲染（如果同名，优先使用子组件的数据）。这反而是内联模板的缺点，就是作用域比较难理解，如果不是非常特殊的场景，建议不要轻易使用内联模板。

<div id="app">
        <child-component inline-template :message="messages">
            <div>
                <h2>在父组件中定义子组件的模板</h2>
                <p>{{ message }}</p>
                <p>{{ msg }}</p>
            </div>
        </child-component>
</div>
<script>
        Vue.component('child-component', {
            props: ['message'],
            data: function() {
                return {
                    msg: '在子组件声明的数据'
                }
            }
        });
        
        var app = new Vue({
            el: '#app',
            data: {
                messages: '在父组件声明的数据'
            }
        })
</script>

动态组件

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

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

动态地改变currentView的值就可以动态挂载组件了。也可以直接绑定在组件对象上。

<div id="app">
        <component :is="addComp"></component>
</div>
<script>
        var app = new Vue({
            el: '#app',
            data: {
                addComp: 'coma'
            },
            components: {
                coma: {
                    template: '<div>动态挂载组件</div>'
                }
            }
        })
</script>