这个应该不难理解，组件分为全局组件和局部组件，也就是说，你可以在页面上面定义一个全局组件，页面上面的任何Vue实例都可使用；而对于局部组件，是和具体的Vue实例相关的，只能在当前Vue实例里面使用组件。还有一点需要说明：组件必须在Vue的实例里面使用，在Vue实例之外使用组件无效。通过下面一个例子即可清晰说明它们的区别。
<body> <div> <b-component></b-component> <b-component2></b-component2> </div> <div> <b-component></b-component> <b-component2></b-component2> </div> <b-component></b-component> <b-component2></b-component2> <script src="https://www.jb51.net/Content/vue/dist/vue.js"></script> <script type="text/javascript"> //定义组件 Vue.component('b-component', { template: '<div>我是全局组件，任何Vue实例都可使用</div>' }) new Vue({ el: '#app', components: { 'b-component2': { template: '<div>我是局部组件，只能在app这个div里面使用</div>' } } }); new Vue({ el: '#app2', }); </script> </body>
得到结果：
（2）组件的传值
组件实例的作用域是孤立的。这意味着不能并且不应该在子组件的模板内直接引用父组件的数据。可以使用 props 把数据传给子组件。这段话怎么理解呢？我们先来看几个例子。
静态Prop
我们先来看看下面的一段简单的代码
<body> <div> <b-component componentmessage="你好"></b-component> </div> <script src="https://www.jb51.net/Content/vue/dist/vue.js"></script> <script type="text/javascript"> Vue.component('b-component', { template: '<div>{{componentmessage}}</div>', props: ['componentmessage'], }) new Vue({ el: '#app' }); </script> </body>
通过在组件里面使用props属性，将外部的值传入组件模板。最终渲染到页面上面就得到“<div>你好</div>”这么一段html
动态Prop
在多数情况下，我们在使用Vue实例的时候，一般通过data属性传入模型，比如
new Vue({ el: '#app', data: { name: 'Jim', Age: '28' } });
这个时候，我们的name和age如何传到组件实例里面呢？
<body> <div> <b-component v-bind:my-name="name" v-bind:my-age="Age"></b-component> </div> <script src="https://www.jb51.net/Content/vue/dist/vue.js"></script> <script type="text/javascript"> Vue.component('b-component', { template: '<div>姓名：{{myName}}，年龄：{{myAge}}</div>', props: ['myName', 'myAge'], }) new Vue({ el: '#app', data: { name: 'Jim', Age: '28' } }); </script> </body>
得到结果
需要说明几点：
在使用标签<b-component>的时候，通过v-bind命令，将Vue实例里面的name、Age属性以别名my-name、my-age的形式传入组件实例。
为什么my-name、my-age传到组件里面就变成了['myName', 'myAge']呢？这是因为在子组件中定义prop时，使用了camelCase命名法。由于HTML特性不区分大小写，camelCase的prop用于特性时，需要转为 kebab-case（短横线隔开）。
很多情况下，v-bind可以简写为冒号（:），所以上述代码也可以这么写：<b-component :my-name="name" :my-age="Age"></b-component>。效果也是一样。
这里很恶心的还有一点，在Props里面定义的必须要使用所谓“驼峰式”的方式来定义变量，否则会因为一个变量名大小写搞死你。比如props:["myName"]这样可以正确，但是如果props:["myname"]这样的话就错误，使用myname取值会是undefined。博主第一次玩这个玩意找了好半天，新手一定注意，大坑，大坑，大坑！慎入！
在封装组件里面，props属性使用非常多，更多props用法可参见文档https://vuefe.cn/v2/guide/components.html
（3）组件的插槽
在使用组件的时候，我们经常需要在组件实例向组件模板传入html元素，这个时候我们就需要在组件的模板标签里面留一些占位符（俗称“坑”），然后在具体的组件实例里面传入标签来填“坑”，在Vue里面这些“坑”也叫插槽，使用<slot>来解决。对于开发人员来说，这个其实不陌生，从原来的母版页到现在的layout页面，基本都是使用的这种原理。