在上一篇文章中，小编为大家分享了如何在Vue中创建组件，总体可以分为下面三个步骤：创建组件构造器，注册组件，使用组件。那么接下来小编为大家分享一个很简单的知识：全局组件和局部组件
一、全局组件
1.定义：可以在多个Vue实例中应用
2.声明：通过Vue中的component方法声明，代码如下：
<body>
<div id="warp">
<my-cpn></my-cpn>
<my-cpn></my-cpn>
</div>
<div id="warp1">
<my-cpn></my-cpn>
</div>
<script type="text/javascript">
const cpnC = Vue.extend({
template:`
<div>
<h1>我是标题</h1>
<p>我的段落</p>
</div>
`
})
Vue.component('my-cpn',cpnC);
var vm = new Vue({
el:'#warp'
});
var vm1 = new Vue({
el:'#warp1'
})
</script>
</body>
全局组件.png
在这个例子中，声明了两个Vue实例 vm、vm1，然后分别在两个Vue实例的范围内使用组件，可以看到显示的信息的三条，说明通过Vue.component()这个方式声明的是全局组件
但是在一般的开发过程中，很少会在一个页面中声明多个Vue实例，所以一般全局组件用的比较少，局部组件使用频率会比较高，那么是不是有读者很疑惑，究竟怎么样定义的组件才能算是局部组件呢？别着急，下面小编就为你答疑啦
二、局部组件
1.定义：顾名思义，局部组件就是只能在注册的Vue实例中运用
2.声明：在Vue实例内部使用conponents属性声明对象，对象内部的属性名为组件的标签名，属性值为组件构造器的名字，代码如下：
<body>
<div id="warp">
<cpn></cpn>
<cpn></cpn>
</div>
<div id="warp1">
<cpn></cpn>
</div>
<script type="text/javascript">
const cpnC = Vue.extend({
template:`
<div>
<h1>我是标题</h1>
<p>我的段落</p>
</div>
`
})
var vm = new Vue({
el:'#warp',
components:{
cpn:'cpnC',
}
});
var vm1 = new Vue({
el:'#warp1'
})
</script>
image.png
在这个例子中，同样也是声明了两个Vue实例：vm 和vm1，然后在vm实例中通过components属性声明一个对象，其中cpn是组件的标签名，cpnC是组件的构造器的名字。观察HTML结构可以发现在两个Vue实例中都引用了局部组件，但是只显示了id名为warp的div下的组件。说明通过components声明的组件是局部组件，使用的范围仅仅是在注册的Vue实例中。
另外，注册局部组件需要注意：components 要加s。因为一个页面中的组件是多个的。
综上所述，全局组件和局部组件主要有以下的不同点
① 声明方式：全局组件是通过Vue中的component方法声明，而局部组件是通过Vue实例中的conponents属性声明
② 作用范围：全局组件可以在多个Vue实例中生效，而局部组件只能在注册的Vue实例范围内生效
以上就是小编为大家分享的有关全局组件和局部组件的小知识，谢谢大家对小编的支持(＾Ｕ＾)ノ~ＹＯ
