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>
来源: http://www.bubuko.com/infodetail-3190039.html