二次封装的element form表单组件，如何让父级直接通过$refs[xxx].resetFields()方法呢？

Question

这是实例：

这是封装：

这是目前使用：

这是this.$refs[xxx]打印：

想达成：优化成不通过$children

大家都很多方法，只不过不太适合，我只想改造好组件，然后父级直接调用是最方便的。

Answer 1

在你封装的组件上写一个resetFields方法去执行el-form的resetFields方法，对应就会直接对引用你封装的组件的ref暴露resetFields方法了

Answer 2

你可以参考一下这个和你需求差不多
https://stackoverflow.com/que...

Answer 3

改下组件结构吧，直接把v-for写在 Form上

<Form v-for="item in xx" :ref="itme.name"
// ref可以是上面这种唯一值，也可以
<Form v-for="item in xx" ref="demo"
// 这样就可以直接写 this.$refs.demo[1].resetFileds()

Answer 4

一直这样使用，没有任何问题，你可以试试

子组件

props:{
 refObj: {
      type: Object,
      default: null,
    }
},
  watch: {
    data: {
      handler: function (val) {
        // 将form实例返回到父级
        this.$emit("update:refObj", this.$refs.form);
      },
      deep: true, // 深度监听
    },
  },
  mounted() {
    // 将form实例返回到父级
    this.$emit("update:refObj", this.$refs.form);
  },
  

父组件
:ref-obj.sync="formInfo.ref"

调用form表单方法
this.formInfo.ref.resetFields();