一、概念
①组件就是对局部视图的封装，组件（component）可以扩展HTML元素，封装可以重复使用的代码。在较高层面上，组件是自定义元素，vuejs的编译器为它添加特殊功能
②目前主流的前端框架angular，react、vue都是组件化开发思想，vue中的组件思想借鉴于react
③利用组件可以提高开发效率，增强可维护性
二、使用
①全局组件（通用组件）：一般把网页中特殊的公共部分注册为全局组件，比如轮播图、tab选项卡、分页、通用导航等
???<div id="app"> ???????<my-header></my-header> ???????<my-main></my-main> ???????<my-footer></my-footer> ???</div> ???<script src="node_modules/vue/dist/vue.js"></script> ???<script> ???????// 组件的名字,不要使用原生的标签名称 ???????Vue.component(‘my-header‘,{ ???????????template:‘<header><h1>头部组件</h1></header>‘ ???????}); ???????Vue.component(‘my-main‘,{ ???????????template:` ???????????<div> ???????????????<ul> ???????????????????<li>轮播图</li> ???????????????????<li>产品内容</li> ???????????????????<li>商品展示</li> ???????????????</ul> ???????????</div> ???????????` ???????}); ???????Vue.component(‘my-footer‘,{ ???????????template:‘<footer><h1>底部组件</h1></footer>‘ ???????}); ???????new Vue({ ???????????el:‘#app‘, ???????????data:{ ???????????} ???????});②局部组件（子组件）：一般是注册一些非通用的
???<div id="app"> ???????<my-child></my-child> ???</div> ???<script src="node_modules/vue/dist/vue.js"></script> ???<script> ???????new Vue({ ???????????el:‘#app‘, ???????????data:{ ???????????}, ???????????components:{ ???????????????myChild:{ ???????????????????template:‘<div><h3>子组件</h3></div>‘ ???????????????}, ???????????}, ???????}); ???</script>③组件与组件之间是相互独立的：
- 默认情况下，组件与组件之间无法进行跨组件数据访问，父子组件都不行
- 组件就是一种特殊的vue实例，不需要实例化，它管理自己的template，模板组件的template必须只有一个根节点
- 在组件中，也可以配置类似于vue实例中的一些选项资源，比如data、methods、computed等等
④组件中的data必须是函数
- 组件的data必须是函数（手动new出来的Vue实例还是普通的对象）
- 函数内部返回一个对象
- 如下面这个例子，如果data不是一个函数，则点击其中一个会影响到其他的两个，不能相互独立开来
???<div id="app"> ???????<demo></demo> ???????<demo></demo> ???????<demo></demo> ???</div> ???<script src="node_modules/vue/dist/vue.js"></script> ???<script> ???????Vue.component(‘demo‘,{ ???????????data:function(){ ???????????????return{ ???????????????????count:0 ???????????????} ???????????}, ???????????template: ‘<button v-on:click="count++">You clicked me {{ count }} times.</button>‘ ???????}); ???????new Vue({ ???????????el:‘#app‘, ???????????data:{ ???????????} ???????}); ???</script>Vuejs组件
原文地址：https://www.cnblogs.com/EricZLin/p/9380176.html