Vue中组件(component)

  组件（Component）是 Vue.js 最强大的功能之一。

  组件可以扩展 HTML 元素，封装可重用的代码。在较高层面上，组件是自定义元素， Vue.js 的编译器为它添加特殊功能。在有些情况下，组件也可以是原生 HTML 元素的形式，以 js 特性扩展。

 

1.全局 Vue.component(tagName, options)

    
    
    
    
    <script src="http://unpkg.com/vue/dist/vue.js"></script>
    
    
    

 
    
    
    

        
     
     
    
    
    
    <script type="text/javascript">
        //注册
        Vue.component('test', {
            template: '
    
    

     
     {{msg}}
    
    
',
            data:function(){
                return {msg:'我的组件'}
            },
            methods:{
                change:function(){
                    //todo
                    console.log(this);
                }
            }
        });

        //创建根实例
        var vm = new Vue({
            el:'#box',
        });
    </script>

empty

2. 局部注册

    
    
     
     
    <script src="vue.js"></script>

 
    
     
     

        
      
      
    
     
     
    <script type="text/javascript">
        ///定义组件
        var testTemplate = {
            template: '
     
     

      
      {{msg}}
     
     
',
            data:function(){
                return {msg:'我的局部组件'}
            },
            methods:{
                change:function(){
                     //todo
                    console.log(this);
                }
            }
        };

        //创建根实例
        var vm = new Vue({
            el:'#box',
            components:{
                'test': testTemplate
            }
        });
    </script>

3. 动态切换组件

    
    
    
    
    <script src="vue.js"></script>

 
    
    
    

        
     
     
    
    
    
    <script type="text/javascript">
        ///定义组件
        var testTemplate = {
            template: '
    
    

     
     {{msg}}
    
    
',
            data:function(){
                return {msg:'我的局部组件1'}
            },
            methods:{
                change:function(){
                     //todo
                    console.log(this);
                }
            }
        };

        //创建根实例  
        var vm = new Vue({
            el:'#box'
        });
    </script>

    
    
    
    
    <script src="vue.js"></script>

 
    
    
    

        
     
     
        
     
     
        
     
     
    
    
    
    <script type="text/javascript">
        ///定义组件
        var testTemplate = {
            template: '
    
    

     
     {{msg}}
    
    
',
            data:function(){
                return {msg:'我的局部组件1'}
            },
            methods:{
                change:function(){
                     //todo
                    console.log(this);
                }
            }
        };

        var testTemplate2 = {
            template: '
    
    

     
     {{msg}}
    
    
',
            data:function(){
                return {msg:'我的局部组件2'}
            },
            methods:{
                change:function(){
                     //todo
                    console.log(this);
                }
            }
        };

        //创建根实例  
        var vm = new Vue({
            el:'#box',
            data:{
                a: testTemplate   //一开始让a的第一个组件
            },
            components:{        //要把组件写入到components里面，如果没有放的话在切换的时候就会找不到 组件
                'testTemplate':testTemplate,
                'testTemplate2':testTemplate2
            }
        });
    </script>