Vue.js組件遇到的那些坑
阿新 • • 發佈：2017-10-07
使用 head eight 搜索 sof one class content soft
對於絕大多數開發人員來講，組件是使用Vue.js不能逃避的話題，當然實際開發也會有很多需要註意的地方，一下均為實際操作中遇到的坑，接下來逐一為大家分享：
1.定義並註冊組件必須要在聲明Vue實例之前，否則組件無效：
//第一步，全局註冊 Vue.component("name",{ template:` <div>組件dom結構</div> ` }) //然後聲明實例 var vm=new Vue({ el:"#app" })
2.涉及到傳值時，props數組中必須采用駝峰命名法：
Vue.component("common-select",{
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組件遇到的那些坑