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

本文主要是介绍Vue2之父子组件传值中使用watch监听props中的对象，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

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

文章目录

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

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.paramsif (routeParams) {this.info.id = routeParams.configIdthis.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.idthis.info.vuePackageName = cfg.vuePackageNamethis.info.note = cfg.note}}})}}};
</script>