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

Posted 2020-09-17 小Y爱学前端

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了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“，切记不掉坑！！

以上是关于Vue.js中全局组件和局部组件的编写差异和注意事项的主要内容，如果未能解决你的问题，请参考以下文章