vue父子组件监听watch动态传值
应用场景:一个编辑功能,子组件需要动态监听表单中输入的值进行条件判断将值传给父组件,父组件接受子组件的值并返回给子组件进行赋值(编辑功能的数据回显)在此次功能中,我将子组件的编辑赋值操作放到了mounted中,然而watch中的formData监听则失效了,若放到created中,则会一切正常。父组件中:<template><div><el-buttontype="p
·
应用场景:
一个编辑功能,子组件需要动态监听表单中输入的值进行条件判断将值传给父组件,父组件接受子组件的值并返回给子组件进行赋值(编辑功能的数据回显)
在此次功能中,我将子组件的编辑赋值操作放到了mounted中,然而watch中的formData监听则失效了,若放到created中,则会一切正常。
父组件中:
<template>
<div>
<el-button
type="primary"
:disabled="isSubmit"
@click="passes(submitEvent)"
>提交申请</el-button
>
<child @childEvent="childEvent" :childFrom="childFrom"></child>
</div>
</template>
<script>
data() {
isSubmit: true, // 子组件中未输入数据则禁用提交按钮,否则开启按钮权限
childFrom: {} // 子组件中输入的表单数据
},
mounted() {
getData();
},
methods:{
childEvent(value, isShow){
// 获取到子组件传来的数据
this.childFrom= value;
if (isShow) {
this.isSubmit = false;
} else {
this.isSubmit = true;
}
},
getData(){
// 调用后端接口获取数据(编辑数据回显)
api.getDataInterface().then(res => {
if(res) {
// 获取到的数据传给子组件以便展示
this.childFrom = res;
}
});
}
}
</script>
子组件中:
<template>
<div>
<el-form label-position="left">
<el-select
require="true"
rules="selected"
label="第一空"
v-model="formData.salesAmount"
placeholder="请选择"
>
<el-option
:label="item.label"
:value="item.value"
v-for="(item, index) in formDataSelect.salesAmountSelect"
:key="index"
></el-option>
</el-select>
<el-select
require="true"
rules="selected"
label="第二空"
v-model="formData.salespersonNumber"
placeholder=" 请选择"
>
<el-option
:label="item.label"
:value="item.value"
v-for="(item, index) in formDataSelect.salespersonNumberSelect"
:key="index"
></el-option>
</el-select>
<el-checkbox
require="true"
rules="checked"
v-model="formData.partnerType"
label="第三空"
>
<el-checkbox label="选一"></el-checkbox><br />
<el-checkbox label="选二"></el-checkbox><br />
<el-checkbox label="选三"></el-checkbox>
</el-checkbox>
</el-form>
</div>
</template>
<script>
props: ["childFrom"],
data() {
formData: {},
formDataSelect: {
salesAmountSelect: [],
salespersonNumberSelect: []
},
},
created() {
// 页面加载,获取到父组件传来的值并赋给表单(编辑数据回显)
// 必须要放到created中执行赋值,若放到mounted中执行,则子组件中的formData监听则会失效
this.formData = this.childFrom;
},
watch: {
// 监听childFrom(父组件传来的数据),并赋值给子组件的表单中
childFrom: {
handler(val) {
this.formData = this.childFrom;
}
},
// 监听formData,将子组件数据传给父组件
formData: {
handler(val, oldVal) {
let isShow = false;
// 判断 若表单中的数据有一项为空 则父组件中的提交按钮则为禁用状态
if (
val.salesAmount &&
val.salespersonNumber &&
val.partnerType &&
val.partnerType.length
) {
isShow = true;
} else {
isShow = false;
}
this.$emit("currentSubmitValue", val, isShow);
},
immediate: true,
deep: true
}
},
</script>
总结:
1、父组件用props
给子组件传值
2、子组件使用watch监听formData
加$emit
的方式给父组件进行传值
3、同时也需要在子组件中监听props的childFrom
,给子组件的表单进行赋值
实际上是要监听两个参数:
一个是父组件传入的,改变子组件内部的值(用于赋值)
另一个是子组件中的`formData`,变化后触发事件执行父组件数据变化(用于触发事件)
更多推荐
已为社区贡献9条内容
所有评论(0)