a. 改变父组件中的变量
子组件中不建议直接改变父组件的变量，且父组件中需要使用sync 关键字。推荐下述用法：
<!-- 批量核销/备货 start -->
<v-batchstockandsell :form="form" :show-batch-dia.sync="showBatchDia" @handlConfirmStockOrSell="handlConfirmStockOrSell" />
<!-- 批量核销/备货 end -->
<script lang="ts">
import { Component, Prop, Vue, Watch } from 'vue-property-decorator'
@Component({
name: 'Batchstockandsell',
components: { }
})
export default class extends Vue {
/**
* 外部参数
*/
/** type 1 核销，2备货 */
@Prop({ default: false }) private form!: any;
/** 是否显示弹窗 */
@Prop({ type: Boolean, default: false }) private showBatchDia!: boolean
get ShowBatchDia() {
return this.showBatchDia
}
set ShowBatchDia(value) {
this.$emit('update:showBatchDia', value)
}
/**
* 初始化数据
*/
/** 提交表单dialog */
private formLoading: boolean = false
/**
* 关闭弹窗
*/
private handleCloseDia() {
this.ShowBatchDia = false
}
/**
* 确定
*/
private handlConfirmStockOrSell() {
if (this.formLoading) {
return
}
this.formLoading = true
this.$emit('update:showSingleDia', true)
this.$emit('handlConfirmStockOrSell', this.form)
this.formLoading = false
}
}
</script>
b. input 框值没绑定且输入时没有响应
场景，订单列表中，有改价操作。我是将改价dialog 写成一个组件A，订单列表页，点击改价时，将row 传到组件A中，组件A中接收参数：
/** 表单数据 */
@Prop({ required: true }) private form!: any;
<el-form-item ref="discount" :prop="`goods[${scope.$index}].discount`" :rules="rules.discount">
<el-input v-model="scope.row.discount" maxlength="6" class="inputwidth" size="mini"
@blur="event => handleInput(event,`${scope.row.discount}`,`${scope.$index}`, 'discount')">
<template slot="append">元</template>
</el-input>
</el-form-item>
我仔细认真的检查了好几遍，确认没有绑定错字段，还有别的字段，不是input 框，已经绑定到相应的值了。
最终发现问题出现的地方是在这：
<el-form ref="form" :model="form" label-width="0" class="form">
解决方法如下：
@Watch('data', { immediate: false, deep: true })
private changeData() {
(this.$refs.form as ElForm) && (this.$refs.form as ElForm).clearValidate()
this.selfForm = this.form
}
然后，别忘了el-form 中：model="selfForm"。
