
Vue2之父子组件传值中使用watch监听props中的对象
vue
vuejs/vue: 是一个用于构建用户界面的 JavaScript 框架,具有简洁的语法和丰富的组件库,可以用于开发单页面应用程序和多页面应用程序。
项目地址:https://gitcode.com/gh_mirrors/vu/vue

·
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>




vuejs/vue: 是一个用于构建用户界面的 JavaScript 框架,具有简洁的语法和丰富的组件库,可以用于开发单页面应用程序和多页面应用程序。
最近提交(Master分支:5 个月前 )
9e887079
[skip ci] 4 个月前
73486cb5
* chore: fix link broken
Signed-off-by: snoppy <michaleli@foxmail.com>
* Update packages/template-compiler/README.md [skip ci]
---------
Signed-off-by: snoppy <michaleli@foxmail.com>
Co-authored-by: Eduardo San Martin Morote <posva@users.noreply.github.com> 7 个月前
更多推荐
所有评论(0)