我有一個名為select-diagnosis的組件，它被許多不同的組件使用。當select-diagnosis被稱為PtdTreatment的特定組件呼叫時，它需要在 fetchDiagnosis 函式中運行特定的函式，而當被其他組件呼叫時，它不會運行該特定函式。
fetchDiagnosis 需要了解select-diagnosis組件已被PtdTreatment組件呼叫。
如何做這樣的事情？
這是來自PtdTreatment組件的代碼：
<el-form-item
label="diagnosis"
prop="dimission_diagnosis"
v-if="form.data_dimission">
<select-diagnosis
v-model="form.diagnosis_dimission"
:defaultValue="_.get(record, 'clean_diagnosis_dimission')"
/>
</el-form-item>
這是選擇診斷組件：
<template>
<el-select
v-bind="$attrs"
:value="value"
@change="onChange"
@clear="onClear"
clearable
filterable
remote
:remote-method="fetchDiagnosis"
:loading="loadingSelect"
>
<el-option
v-for="item in items"
:key="`diagnosis-${item.id}`"
:label="item.code ' - ' item.description"
:value="item.code"
>
</el-option>
</el-select>
</template>
<script>
export default {
name: "SelectDiagnosis",
inheritAttrs: false,
props: ["value", "defaultValue"],
data() {
return {
loadingSelect: false,
items: []
};
},
methods: {
fetchDiagnosis(query) {
const valid = query !== "" && query.length > 2;
if (!valid) return;
this.loadingSelect = true;
let params = { string: query };
axios
.get("/config/diagnosi", { params })
.then(({ data }) => {
//pseudo code
// if this component is called by **select-diagnosis** then do this
this.items = data.filter(diagnosi => {
const code = diagnosi.codice.replace(/\b0 /g, "");
if (code.length >= 4) {
return diagnosi;
}
});
// else do this
this.items = data;
})
.finally(() => (this.loadingSelect = false));
},
onChange(x) {
this.$emit("input", x);
},
onClear() {
this.$emit("input", null);
this.items = [];
}
},
watch: {
defaultValue: {
immediate: true,
handler(newVal, oldVal) {
if (newVal && oldVal === undefined) {
this.items = [newVal];
this.$emit("input", newVal.codice);
}
}
}
}
};
</script>
uj5u.com熱心網友回復：
有多種方法可以實作這一點，想到的兩種方法立即使用道具。
- 您可以將
filterDiagnoses布爾道具傳遞給選擇診斷。如果為真，則運行過濾器邏輯。
<select-diagnosis v-model="form.diagnosis_dimission" :defaultValue="_.get(record, 'clean_diagnosis_dimission')" :filterDiagnoses="true" />
- 您可以將控制反轉給父函式并公開
filterFn回呼道具 - 父函式將函式道具傳遞給子函式，子函式將在獲取診斷時呼叫該函式（這感覺更清晰，更可擴展）：
/* in the PtdTreatment component */
/* ... */
methods: {
filterDiagnosis(data) {
// filter data
},
}
/* in the PtdTreatment template */
<select-diagnosis v-model="form.diagnosis_dimission" :defaultValue="_.get(record, 'clean_diagnosis_dimission')" :filterFn="filterDiagnosis" />
/* in the select-diagnosis component */
fetchDiagnosis(query) {
const valid = query !== "" && query.length > 2;
if (!valid) return;
this.loadingSelect = true;
let params = { string: query };
axios
.get("/config/diagnosis", { params })
.then(({ data }) => {
if (this.filterFn) {
this.items = this.filterFn(data);
} else {
this.items = data;
}
})
.finally(() => (this.loadingSelect = false));
},
}
uj5u.com熱心網友回復：
您可以prop在指定父組件的“身份”的子組件上設定 a ，然后在子組件中進行測驗：
<select-diagnosis
v-model="form.diagnosis_dimission"
:defaultValue="_.get(record, 'clean_diagnosis_dimission')"
parent="PtdTreatment"
/>
然后在孩子中（簡化示例）：
export default {
props: ["value", "defaultValue", "parent"],
methods: {
fetchDiagnosis(query) {
if (this.parent === "PtdTreatment") {
// Parent-specific code here
}
}
}
}
轉載請註明出處，本文鏈接：https://www.uj5u.com/net/381418.html
標籤：Vue.js