Vue-2

全局组件

    <body>
        <div id="app" >
            <zhujian_all></zhujian_all>
        </div>
    </body>
    
    <script type="text/javascript">
        
        // 全局自定义组件
        Vue.component(
            'zhujian_all',
            {
                template:'<div>全局组件 <zhujian_a></zhujian_a> </div>',
　　　　　　　　}
        new Vue({
            el:'#app',
        })
    </script>

局部组件

    <body>
        <div id="app" >
            <zhujian_all></zhujian_all>
        </div>
    </body>
    
    <script type="text/javascript">
        // 局部组件定义
        var zhujian_a={
            template:'<div>局部组件</div>'
        }
        
        // 全局自定义组件
        Vue.component(
            'zhujian_all',
            {
                template:'<div>全局组件 <zhujian_a></zhujian_a> </div>',
                //注册局部组件
                components:{
                    zhujian_a
                }
            }
        )
        
        
        
        new Vue({
            el:'#app',
        })
    </script>

组件中的数据绑定

    <script type="text/javascript">
        // 局部组件定义
        var zhujian_a={
            template:'<div>局部组件</div>'
　　　　　　　　//局部组件中的数据绑定要在这里定义

        }
        
        // 全局自定义组件
        Vue.component(
            'zhujian_all',
            {
                //代码模板
                template:'<div>全局组件 <zhujian_a></zhujian_a> {{name}}</div>',
                //注册局部组件
                components:{
                    zhujian_a
                },
                //组件定义绑定数据
                data:function(){
                    return {name:'绑定的数据'}
                }
            }
        )
        
        
        
        new Vue({
            el:'#app',
        })
    </script>