本篇文章给大家带来的内容是关于vue.js组件中全局注册和局部注册的简单介绍以及实例分析，有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。
1、全局注册实例(按照官网的例子下面是代码)
<div id="app">
<com-btn></com-btn>
<com-btn></com-btn>
</div><script>
Vue.component('com-btn',{
data:function(){
return{
num:0,
}
},
template:`<button v-on:click='change'>点我{{num}}次</button>`,
methods:{
change:function(){
this.num += 1;
}
}
})
var vm = new Vue({
el:'#app',
data:{
},
})
</script>我们在注册一个组件的时候需要给他起一个名字比如com-btn，从上面的代码我们可以看见
Vue.component('my-component-name', { /* ... */ })这个组件名字就是我们注册的这个组件com-btn的第一个参数.这个组件就是全局注册的，在他们注册之后，我们可以用在任何新创建的vue根实例(new Vue)里面。
值得注意的是所有组件必须写在根实例的前面才会生效，
2局部祖册的实例
<script>
var childcom ={
data:function(){
return{
num:0,
}
},
template:`<button v-on:click='change'>点我{{num}}次</button>`,
methods:{
change:function(){
this.num += 1;
}
}
}
var vm = new Vue({
el:'#app',
data:{
},
components:{
'com-btn':childcom,//调用这个组件
}
})
</script>局部注册的好处 就是当你使用的是webpack这样的构建系统时，如果是用全局注册的这种方法注册的组件，那么当你不使用某一个组件的时候，它仍然会存在最终的构建结果之中，这就增加的无谓的js下载。
所以我们可以通过一个简单的js对象来注册组件
var ComponentA = { /* ... */ }在需要使用这个组件时， 你只需要在你的你的根实例里面去调用这个定义的组件即可。
new Vue({
el: '#app'
components: {
'component-a': ComponentA,
'component-b': ComponentB
}
})值得注意的是根实例的属性名字是components，千万不要忘记s。组件中的其他属性和实例的一样但是data必须是一个函数。
对于components对象中的每个的属性来说就是自定义组件的名字，属性值就是这个组件的选项对象。
局部注册的组件在其子组件中是不可用的，如果你希望componentA在componentB中可以使用那你需要下面这样写法：
var ComponentA = { /* ... */ }
var ComponentB = {
components: {
'component-a': ComponentA
},
// ...
}相关推荐：
以上是vue.js组件中全局注册和局部注册的简单介绍以及实例分析的详细内容。更多信息请关注PHP中文网其他相关文章！
