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

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

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。