在編寫(xiě)頁(yè)面時(shí)經(jīng)常會(huì)使用各組件庫(kù)的Modal組件蜈首。一般Modal組件管理的數(shù)據(jù)非常多者娱,通常一個(gè)頁(yè)面中有多個(gè)Modal,如果不將各個(gè)Modal封裝成組件的話秽荤,數(shù)據(jù)堆砌在主頁(yè)面將使得代碼難以閱讀甜奄。但是封裝也是一門(mén)學(xué)問(wèn)柠横。
完全不封裝的Modal代碼示例
當(dāng)在主頁(yè)面管理編寫(xiě)Modal及管理數(shù)據(jù)時(shí),當(dāng)有多個(gè)Modal時(shí)會(huì)使得數(shù)據(jù)繁雜混亂课兄,難以閱讀牍氛。
<template>
<div>
<Modal v-model="modal1">
{{ data1 + data2 + data3 }}
</Modal>
<Modal v-model="modal1">
{{ data1 + data2 + data3 }}
</Modal>
</div>
</template>
<script>
export default {
name: "ModalTest",
data() {
return {
modal1: false,
data1: 1,
data2: 2,
data3: 3,
modal2: false,
data4: 1,
data5: 2,
data6: 3,
};
},
methods: {
getData() {
reqest("http://api",{params:1}).then((res) => {
this.data1 = res.data;
this.modal1 = true;
});
},
getData2() {
reqest("http://api",{params:2}).then((res) => {
this.data5 = res.data;
this.modal2 = true;
});
},
},
};
</script>
將Modal及其數(shù)據(jù)封裝成組件
如下封裝雖好,但是modal1烟阐、modal2糜俗,data1,data5以及數(shù)據(jù)請(qǐng)求方法的管理依然留在主頁(yè)面曲饱,代碼多起來(lái)后悠抹,依然顯得混亂。
<template>
<div>
<modal-1 :modal1='modal1' :data1='data1'/>
<modal-1 :modal2='modal2' :data5='data5'/>
</div>
</template>
<script>
import modal1 from './modal1.vue';
import modal2 from './modal2.vue';
export default {
name: "ModalTest",
comments:{modal1,modal2},
data() {
return {
modal1: false,
data1: 1,
modal2: false,
data5: 2,
};
},
methods: {
getData() {
reqest("http://api", { params: 1 }).then((res) => {
this.data1 = res.data;
this.modal1 = true;
});
},
getData2() {
reqest("http://api", { params: 2 }).then((res) => {
this.data5 = res.data;
this.modal2 = true;
});
},
},
};
</script>
<template>
<Modal v-model="modal1">
{{ data1 + data2 + data3 }}
</Modal>
</template>
<script>
export default {
name:'modal1',
prop:{
data1:Number,
modal1:Boolean,
},
data() {
return {
data2:2,
data3:3,
}
}
}
</script>
將Modal數(shù)據(jù)進(jìn)行完全封裝扩淀。
最好的封裝是將數(shù)據(jù)請(qǐng)求與其他所有數(shù)據(jù)都進(jìn)行封裝楔敌。由父組件調(diào)用子組件的方法。
<template>
<div>
<modal-1 ref="modal1"/>
<modal-1 ref="modal2"/>
</div>
</template>
<script>
import modal1 from './modal1.vue';
import modal2 from './modal2.vue';
export default {
name: "ModalTest",
comments:{modal1,modal2},
methods: {
getData() {
this.$refs.modal1.getData(1);
this.$refs.modal2.getData(2);
},
},
};
</script>
<template>
<Modal v-model="modal1">
{{ data1 + data2 + data3 }}
</Modal>
</template>
<script>
export default {
name:'modal1',
data() {
return {
modal1:false,
data1:1,
data2:2,
data3:3,
}
},
methods: {
getData(params) {
reqest("http://api", { params: params }).then((res) => {
this.data1 = res.data;
this.modal1 = true;
});
},
},
}
</script>