首页 > 代码库 > Vue.js中全局组件和局部组件的编写差异和注意事项

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

2024-09-21 08:54:07   206人阅读

全局组件的编写方式：

<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中全局组件和局部组件的编写差异和注意事项


联系
我们