Vue base 類封裝
-----------------------------------------------------------------------------------------
vue在實際開發中，代碼封裝demo
這裏以多個頁面的，查詢接口，getlist 爲例
分析多個頁面 getlist 行爲得出
相同點
1 .1 進行網絡請求
1.2 將接口結果賦值給變量
1.3 變量 data
不同點
2.1 接口Url
得出 : 子類定義 apiPath ，方法寫在父類中
1：父類代碼
//基類 base
<template>
<section>
父類的模板層代碼
</section>
</template>
<script>
export default {
name: 'base',
components: {
},
data() {
return {
data: {
data:[]
},
name :'base',
};
},
created() {
/**Base-init */
},
methods: {
async getInfo() {
const param = {
data: { id: this.form.id },
url: `/Api/Admin/${this.apiPath}/getInfo`,
};
const res = await this.request(param);
//進行賦值，子類調用 getInfo 則下面this指向子頁面
const { data} = this;
data = res.result;
}
},
};
</script>
2 子類代碼
//子類
<template>
<section>
{{data}}
</section>
</template>
<script type="text/ecmascript-6">
import Base from 'components/Base';
export default {
extends: Base,
components:{
},
data() {
return {
data: {
data:[], //調用父類的 getinfo 會將這個變量賦值上數據
apiPath:'myApiPath'
},
};
},
mounted() {
console.log(this.name); //base 子類沒有就找父類定義的，所以這裏打印會是base
this.getinfo() //調用父類的 getinfo // 注意設置了屬性 apiPath
},
methods: {
//
}
};
</script>
vue 繼承總結
1子類不寫 <template> 則渲染base基類模板層，可以利用這點去做封裝
2繼承通用原則，父類 的 屬性 ，方法 ， 子類一樣使用this調用。
3父類方法裏的 this 子類調用則指向子類， 可以將子類相同變量封裝進基類
4this指向是理解繼承的關鍵
-----------------------------------------------------------------------------------------