11.使用组件时，遇到了一些坑

a. 改变父组件中的变量

子组件中不建议直接改变父组件的变量，且父组件中需要使用sync 关键字。推荐下述用法：

<v-batchstockandsell :form="form" :show-batch-dia.sync="showBatchDia" @handlConfirmStockOrSell="handlConfirmStockOrSell" />

<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"。