Vue 父组件调用子组件事件

在子组件(BasicEditForm)定义方法,仅供父组件调用.

<template>
<div>
<el-form
 :model="localModel.formModel"
 :rules="localModel.formRules"
  label-width="80px"
 :ref="localModel.formRef"
  label-position="left"
>
  <el-row class="form-row">
   <el-form-item :label="item.label" :class="getFieldClass(item)" :prop="item.prop">
      <el-input :style="{'width':item.width} v-model="localModel.formModel[item.attr]" :placeholder="item.placeholder"></el-input>
   </el-form-item>
  </el-row>
</el-form>
</div>
</template>
<script>
export default {
  name: 'basicEditForm',
  props: {
    formObject: Object
  },
  data() {
    return {
      localModel: {
      }
    };
  },
  methods: {
    clearForm(val) {
      console.info(val);
      this.$refs[this.localModel.formRef].resetFields();
    },
}
</script>

在父组件使用

<template>
  <div style="text-align:center;">
    <BasicEditForm :formObject="formObject" ref="personFormRef"></BasicEditForm>
    <el-button @click="handleClear">重置</el-button>
  </div>
</template>
<script>
// 触发子组件方法.
handleClear() {
  this.$refs["personFormRef"].clearForm("test-parameters");
}
</script>