对于绝大多数开发人员来讲，组件是使用Vue.js不能逃避的话题，当然实际开发也会有很多需要注意的地方，一下均为实际操作中遇到的坑，接下来逐一为大家分享：
1.定义并注册组件必须要在声明Vue实例之前，否则组件无效：
//第一步，全局注册Vue.component("name",{ ?template:` ????<div>组件dom结构</div> ????`})//然后声明实例var vm=new Vue({ ???el:"#app"})2.涉及到传值时，props数组中必须采用驼峰命名法：
???Vue.component("common-select",{ ???????//此处使用btn-value则会报错 ??????????props:["btnValue","list"], ???????template:` ???????????<div class="select-box"> ???????????????<a href="#" class="searchBtn" v-text="btnValue"></a> ???????????????<input type="text" name="" class="search-con"> ???????????????<com-list :list="list"></com-list> ???????????</div> ???????` ???}) ???????3.多层组件传值时，props数组中对应的值，命名必须相同：
??//list由外层组件向内层组件传值时，list名字必须相同， ??//此处与形参不同，两个组件属于不同的命名空间。 ??//名字不同则会报错 ???Vue.component("common-select",{ ???????props:["btnValue","list"], ???????template:` ???????????<div class="select-box"> ???????????????<a href="#" class="searchBtn" v-text="btnValue"></a> ???????????????<input type="text" name="" class="search-con"> ???????????????<com-list :list="list"></com-list> ???????????</div> ???????` ???}) ???Vue.component("com-list",{ ???????props:["list"], ???????template:` ???????<ul class="select-items"> ???????????<li v-for="item in list">{{item}}</li> ???????</ul> ???????` ???})4.组件间传值时，需要注意，传递的是静态值，还是动态数据：
???????<!-- 静态值相当于自定义属性，而动态数据则需要绑定 --> ???????<common-select btn-value="search" :list="select1"></common-select> ???????<common-select btn-value="搜索" :list="select2"></common-select>
***源码如下：
<!DOCTYPE html><html lang="en"><head> ???<meta charset="UTF-8"> ???<title>Document</title> ???<style type="text/css"> ???????*{margin: 0;padding: 0;} ???????body{font-family:"Microsoft YaHei";} ???????ul,li{list-style: none;} ???????em,i{font-style: normal;} ???????a:hover,a:active,a:link,a:visited{text-decoration: none} ???????.clear-fix:after{content:".";visibility: hidden;font-size: 0;display: block;clear: both;height: 0;} ???????.wrap{width: 100%;} ???????.wrap-1200{width:1200px;margin-left: auto;margin-right: auto;} ???????.select-box{width:400px;background: #666fff;padding:20px;position: relative;} ???????.select-items{width:100%;display:none;border:1px solid #fff;border-top:none;} ???????.search-con{width:100%;height:40px;border: 1px solid #ddd;background:#fff;} ???????.searchBtn{ ???????????position: absolute; ???????????top: 20px; ???????????line-height: 40px; ???????????padding:0 10px; ???????????text-align: center; ???????????right: 20px; ???????} ???????.select-items li{ ???????????line-height:40px; ???????????color: #fff; ???????????padding:0 15px; ???????????box-sizing: border-box;; ???????} ???????.select-items li:hover{ ???????????background:#fff; ???????????color:#666fff; ???????????cursor: pointer; ???????} ???????.search-con:focus + .select-items{ ???????????display:block; ???????} ???????????</style></head><body> ???<div id="app"> ???????<!-- 静态值相当于自定义属性，而动态数据则需要绑定 --> ???????<common-select btn-value="search" :list="select1"></common-select> ???????<common-select btn-value="搜索" :list="select2"></common-select> ???</div></body><script type="text/javascript" src="js/vue.js"></script><script type="text/javascript"> ???Vue.component("common-select",{ ???????props:["btnValue","list"], ???????template:` ???????????<div class="select-box"> ???????????????<a href="#" class="searchBtn" v-text="btnValue"></a> ???????????????<input type="text" name="" class="search-con"> ???????????????<com-list :list="list"></com-list> ???????????</div> ???????` ???}) ???Vue.component("com-list",{ ???????props:["list"], ???????template:` ???????<ul class="select-items"> ???????????<li v-for="item in list">{{item}}</li> ???????</ul> ???????` ???}) ???var vm=new Vue({ ???????el:"#app", ???????data:{ ???????????select1:["teitei","pomelott","dudu"], ???????????select2:["kobe","jordan","harden"] ???????} ???})</script></html>Vue.js组件遇到的那些坑
原文地址：http://www.cnblogs.com/pomelott/p/7635422.html