Vue2之父子组件传值中使用watch监听props中的对象

Vue2之父子组件传值中使用watch监听props中的对象

1. 子组件

BasicInfoForm.vue如下

<template>
  <el-form ref="basicInfoForm" :model="info" :rules="rules" label-width="150px">
    <el-row>
      <!--前端-->
      <el-col :span="12" v-if="false">
        <el-form-item label="主键" prop="id">
          <el-input placeholder="请输入" v-model="info.id"/>
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="模块名" prop="vueModuleName">
          <el-input placeholder="请输入" v-model="info.vueModuleName"/>
        </el-form-item>
      </el-col>

      <el-col :span="24">
        <el-form-item label="备注" prop="remark">
          <el-input type="textarea" :rows="3" v-model="info.note"></el-input>
        </el-form-item>
      </el-col>
    </el-row>
  </el-form>
</template>

<script>
export default {
  name: "BasicInfoForm",
  props: {
    info: {
      type: Object,
      default: null
    }
  },
  watch: {
    //监听info对象
    info: {
      handler(newVal, oldVal) {
        //监听info对象变化
        console.log("newVal",newVal)
        //do same things...
      },
      deep: true, //深度监听
      immediate: true 
    }
  },
  data() {
    return {
      rules: {
        vueModuleName: [
          {required: true, message: "请输入模块名", trigger: "blur"}
        ],
          //......
      }
    };
  }
};
</script>

2. 父组件

SettingsIndex.vue如下

<template>
    <el-card>
      <el-tabs v-model="activeName">
        <el-tab-pane label="基本信息" name="basic">
          <BasicInfoForm ref="basicInfo" :info="info"/>
        </el-tab-pane>
        <!--......-->
    </el-tabs>
    </el-card>
</template>

<script>
import BasicInfoForm from "@/views/config/BasicInfoForm.vue";
import ConfigApi from "@/api/genConfig.js";

export default {
  name: "SettingsIndex",
  components: {
   BasicInfoForm
  },
  data() {
    return {
      activeName: "basic",
      info: {
        generateType: "0"
      },
      dbConfig: {}
    };
  },
  created() {
    console.log("created====")
    //获取路由中传递的参数
    const routeParams = this.$route.params
    if (routeParams) {
      this.info.id = routeParams.configId
      this.info.vueModuleName = decodeURIComponent(routeParams.moduleName)
      let data = {"id": this.info.id}
      //请求后端数据
      ConfigApi.getOne(data).then(response => {
        const res = response.data;
        if (res.isSuccess) {
          this.dbConfig = res.data;
          let cfg = JSON.parse(this.dbConfig.config)
          if (cfg != null) {
		   //赋值，赋值后子组件中的watch会监听并显示
            this.info.id = cfg.id
            this.info.vuePackageName = cfg.vuePackageName
            this.info.note = cfg.note
          }
        }
      })

    }
  }
  };
</script>