vue3 父组件调用子组件的函数的方式

正规方式

首先注意一点，这个是在子组件里面定义一个函数（Function），然后在父组件里面调用。
不是父组件设置函数，让子组件调用。

正常呢，应该在子组件里面定义一个函数，然后父组件通过 $refs 来调用，但是我总感觉这个太复杂，原因嘛，看看这个图。

  const formControl = ref(null)
  onMounted(() => {
    console.log('表单的$ref', formControl)
  })

$ref

这里有属性、函数，还有我不认识的。

UI库用的就是这种方法，比如 el-form 的清空表单的函数。

    const clearForm = () => {
      // 清空表单
      formControl.value.resetFields()
    }

对了，还有一个问题，需要在 onMounted 里面或者之后，才能获取到 $ref 的值，这个似乎有点晚。

非正规方式。

本来想在父组件定义一个函数，然后通过属性传递进去，再在子组件里面覆盖这个函数，结果这个函数是只读的，覆盖不了。

所以只好折腾一下，用参数来传递一下。

还是在父组件里面设置一个函数，然后设置一个参数。
还是通过属性传递进去，然后子组件把函数通过参数传递出来。

好绕呀，晕了没？

代码如下：

• 父组件

  // 表单控件需要的属性
  let resetForm = () => {}
  const formProps = reactive({
    reload: false,
    reset: (fun) => { resetForm = fun }
  })

• 子组件

  // 返回重置函数
  props.reset(() => {
    setFormColSpan()
    setFormColSort()
    setFormColShow()
  })

这样就可以了。