Vue组件的分类

组件的分类

分类：全局组件、局部组件

<div id="itany">
    <my-hello></my-hello>
    <my-world></my-world>
</div>
<script>
    /**
     * 全局组件，可以在所有vue实例中使用
     */
    Vue.component('my-hello', {
        template: '<h3>{{name}}</h3>',
        data: function() { //在组件中存储数据时，必须以函数形式，函数返回一个对象
            return {
                name: 'alice'
            }
        }
    });
    /**
     * 局部组件，只能在当前vue实例中使用
     */
    var vm = new Vue({
        el: '#itany',
        data: {
            name: 'tom'
        },
        components: { //局部组件
            'my-world': {
                template: '<h3>{{age}}</h3>',
                data() {
                    return {
                        age: 25
                    }
                }
            }
        }
    });
</script>