注册

1.全局注册:Vue.component(tagName, options)

// 注册

Vue.component('my-component', {

template:'

A custom component!

'

})

// 创建一个根实例

newVue({

el:'#example'

})

__________________________________________

2.局部注册components

         <my-component>my-component>

----------------------------------------------------------------------------

var Child = { 

         template: '

SSSSSSSSSSSSSSS

'

'}

new Vue({  

        el: '#example', 

         components: {   

                  // 只能在父级模板中使用

                 'my-component': Child

         }

})

-------------------------------------------------------------------------------

new Vue({

     el: '#example',

    components: {

             my-component:{

                    template: '

SSSSSSSSSSSSSSS

'

             }

     }

})

______________________________________________________

3.全局组件中的data必须是一个函数。

       

     

Vue.component('simple-counter', {  

         template: '{{ counter }}',

         data: function () {   

                  return {    

                             counter: 0  //每个组件的data对象不同

                    }  

          }

})

new Vue({  el: '#example-2'})