對於絕大多數開發人員來講，組件是使用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>
5.在組件內部定義數據時，需要使用函數返回對象（此對象不能為全局的靜態對象）
//此數據用於說明靜態全局對象不能用於組件內部 var testObj={ selectData:"" } Vue.component("common-select",{ props:["btnValue","list"], data:function(){ //此處若改為return testObj 將會使每個組件使用共同的數據 return { selectData:"" } }, template:` <div class="select-box"> <a href="#" class="searchBtn" v-text="btnValue"></a> <input type="text" name="" class="search-con" v-model="selectData"> <com-list :list="list" v-on:doSelect="getSelect"></com-list> </div> `, methods:{ getSelect:function(item){ console.log(item); this.selectData=item; } } })
6.利用自定義事件完成子組件向父組件傳值時，需要搞清楚為哪個組件綁定事件接收函數
Vue.component("common-select",{
props:["btnValue","list"],
data:function(){
return {
selectData:""
}
},
//自定義時間接收函數應綁定在com—list自定義標簽內
template:`
<div class="select-box">
<a href="#" class="searchBtn" v-text="btnValue"></a>
<input type="text" name="" class="search-con" v-model="selectData">
<com-list :list="list" v-on:doSelect="getSelect"></com-list>
</div>
`,
methods:{
getSelect:function(item){
console.log(item);
this.selectData=item;
}
}
})
***源碼如下：
<!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%;border:1px solid #fff;border-top:none;display: 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;
}
.disBlock{
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"],
data:function(){
return {
selectData:"",
focusState:false
}
},
//自定義時間接收函數應綁定在com—list自定義標簽內
template:`
<div class="select-box">
<a href="#" class="searchBtn" v-text="btnValue"></a>
<input type="text" name="" class="search-con" v-model="selectData" @click="focusState=!focusState">
<com-list :list="list" v-on:doSelect="getSelect" :class="{disBlock:focusState}"></com-list>
</div>
`,
methods:{
getSelect:function(item){
this.focusState=!this.focusState;
this.selectData=item;
}
}
})
Vue.component("com-list",{
props:["list"],
template:`
<ul class="select-items">
<li v-for="item in list" @click="selectItem(item)">{{item}}</li>
</ul>
`,
methods:{
selectItem:function(item){
console.log(this);
this.$emit("doSelect",item)
}
}
})
var vm=new Vue({
el:"#app",
data:{
select1:["teitei","pomelott","dudu"],
select2:["kobe","jordan","harden"]
}
})
</script>
</html>