今天的項(xiàng)目中有一個(gè)類似tab切換的功能，切換的時(shí)候需要根據(jù)按鈕所代表的不同狀態(tài)對(duì)子組件的數(shù)據(jù)進(jìn)行修改，小小的記錄一下
-
情況一
如圖适瓦，切換的時(shí)候修改單位
image.png
實(shí)現(xiàn)
父組件中
<!-- 子組件動(dòng)態(tài)賦值 -->
<Proverview :tender="tender"></Proverview>
<!-- data中定義驯遇，切換時(shí)修改tender值 -->
data() {
return {
tender: '全部',
};
}
子組件中
<!-- props對(duì)值類型進(jìn)行定義 -->
props: {
tender: {
type: String,
required: true,
},
},
<!-- 根據(jù)props傳過來(lái)的tender渲染內(nèi)容 -->
<div class="companyArray" v-if="tender=='全部'">
<span>建設(shè)單位：北京城市副中心站綜合樞紐建設(shè)管理有限公司</span>
<span>設(shè)計(jì)單位：市政設(shè)計(jì)院、中鐵設(shè)計(jì)集團(tuán)捎琐、建筑設(shè)計(jì)院会涎、阿海普</span>
</div>
<div class="companyArray" v-else-if="tender=='一標(biāo)段'">
<span>監(jiān)理單位：華城監(jiān)理、賽瑞斯</span>
<span>施工單位：中鐵建設(shè)瑞凑、北京建工末秃、中鐵十六局</span>
</div>
<div class="companyArray" v-else-if="tender=='二標(biāo)段'">
<span>監(jiān)理單位：逸群監(jiān)理、北高監(jiān)</span>
<span>施工單位：中鐵建工拨黔、北京城建蛔溃、中鐵一局</span>
</div>
<div class="companyArray" v-else-if="tender=='三標(biāo)段'">
<span>監(jiān)理單位：未招標(biāo)</span>
<br />
<span>施工單位：未招標(biāo)</span>
</div>
<div class="companyArray" v-else>
<span>監(jiān)理單位：未招標(biāo)</span>
<br />
<span>施工單位：未招標(biāo)</span>
</div>
-
情況二
如圖绰沥，切換的時(shí)候修改圖中渲染所需數(shù)據(jù)
image.png
實(shí)現(xiàn)
父組件中
<!-- 子組件動(dòng)態(tài)賦值 -->
<Evnstate :tender="tender"></Evnstate>
<!-- data中定義，切換時(shí)修改tender值 -->
data() {
return {
tender: '全部',
};
}
子組件中
<!-- props對(duì)值類型進(jìn)行定義 -->
props: {
tender: {
type: String,
required: true,
},
},
<!-- 根據(jù)props傳過來(lái)的tender修改渲染所需數(shù)據(jù)贺待，要利用watch監(jiān)聽新的傳過來(lái)的值 -->
watch: {
tender: {
handler(newValue, oldValue) {
if (newValue == '一標(biāo)段') {
this.evnData = [{state: '一標(biāo)',}];
} else if (newValue == '二標(biāo)段') {
this.evnData = [{state: '二標(biāo)'}];
} else if (newValue == '三標(biāo)段') {
this.evnData = [{state: '三標(biāo)'}];
} else if (newValue == '四標(biāo)段') {
this.evnData = [{state: '四標(biāo)'}];
} else {this.evnData = [{state: '一標(biāo)' },{state: '二標(biāo)'}, {state: '三標(biāo)'},{state: '四標(biāo)'}];
}
},
deep: true,
},
},
