vue 项目中遇到的路由传参以及父子组件传值
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>
