Vue.js中全局组件和局部组件的编写差异和注意事项

全局组件的编写方式：

<div  id=‘app‘>
   <runoob></runoob>
</div>

<script>
Vue.component(‘runoob‘,{
      template:‘<h1>Hello World!</h1>‘
})    

new Vue({
     el:‘#app‘,
})
</script>

局部组件的编写方式：

<div  id=‘app‘>
   <runoob></runoob>
</div>

<script>var child = {    template:‘<h1>Hello World!</h1>‘};

new Vue({
     el:‘#app‘,     components:{        ‘runoob‘:child     }
})
</script>

其中最需要注意的细节即是局部组件中是”components“,而全局组件中是”component“，切记不掉坑！！