index.vue 父組件：
watch: {
// 監測路由變化,只要變化了就調用獲取路由參數方法將數據存儲本組件
$route: "getQuery",
jsdata: function(newVal, oldVal) {
this.jsdata = newVal;
}
},
mounted() {
this.getQuery();
},
methods: {
// 接收路由跳轉時傳遞過來的參數id和type
getQuery() {
this.id = this.$route.query.id; // 必選參數
this.type = this.$route.query.type; // 必選參數
console.log("接收路由跳轉參數", this.id, this.type);
},
// 要傳給流程圖的jsdata 是子傳過來的，自動調用
jslx(jiansuo) {
if (jiansuo == "監獄") {
this.jsdata = jiansuo;
}
},
},
basic.vue 子組件
<script>
export default {
data() {
return {
jiansuo: "",
id: '',
type: '',
xuexing: "",
// 后台返回數據
infos: {},
};
},
// 接受父傳過來的id和type，並且作為參數傳給后台
props:{
chuanid: {
required: true,
type: String,
default: ""
},
chuantype: {
required: true,
type: String,
default: ""
},
},
// 監聽父組件傳過來的id和type，當發生變化時執行監聽函數
watch: {
chuanid: function(newVal, oldVal) {
this.id = newVal; //newVal即是父組件傳過來的chuanid
},
chuantype: function(newVal, oldVal) {
this.type = newVal; //newVal即是父組件傳過來的chuantype
this.getInfos(); // 等到接收到傳來的值的時候才執行獲取基本信息函數
},
},
mounted() {
},
methods: {
// 獲取基本信息
getInfos() {
let obj = {};
obj.id = this.id === undefined ? "" : this.id;
obj.type = this.type === undefined ? "" : this.type;
console.log("獲取基本信息", this.id, this.type); // id = "14567890" type = "0"
this.axios.post("/api/queryBasic", obj).then(res => {
console.log('基本信息',res);
// debugger
// 數字轉換對應字段類型三部曲
this.xuexing = res.data.data.xuexing
this.xue()
res.data.data.xuexing = this.xuexing
// 后台全部轉換好的數據賦給infos
this.infos = res.data.data;
// 監所類型-傳給父組件的值
this.jiansuo = res.data.data.ptype;
this.jiansuotype()
})
.catch(error => {
console.log(error);
});
},
// 定義傳給父組件的值
jiansuotype(){
this.$emit('jstype',this.jiansuo)
// console.log('這是子傳父',this.jiansuo)
},
// 定義血型轉換函數
xue() {
if (this.xuexing === "01") {
this.xuexing = "A型";
} else if (xuexing === "02") {
this.xuexing = "B型";
} else if (xuexing === "03") {
this.xuexing = "O型";
}
// console.log(this.xuexing, "999");
},
}
};
</script>