Vue2 的父子组件在道具中传递了对对象的观察监听使用
最编程
2024-05-08 12:39:29
...
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.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>