Vue3父组件调用子组件里的方法

在网上查了很多方法，基本就是子组件将方法用defineExpose导出加return，然后父组件里用ref绑定获取，方法其实是可行的，我当时是踩了个坑，在这里跟大家分享一下，也许有遇到这种问题的，可以节省一点时间。

其中，子组件如果用v-if控制了显隐，那么此时在父组件中是调用不到子组件里的方法的，ref返回的是null。

解决办法（这个是 不需要展示子组件 的业务前提下，会有这个问题，如果业务允许子组件加载出来，那就没有问题了，只是注意要在v-if条件成立之后，再去调用里面的方法）：

1.换成v-show，如果需要刷新子组件内容的话，使用nextTick刷新。

2.（不推荐）继续使用v-if，在调用子组件方法之前，使子组件加载出来，然后给其配一个class，使其隐藏，或者通过jquery隐藏。（这个办法纯属个人瞎搞，万不得已千万别整）

子组件代码:

import {reactive, toRefs, ref, onMounted, defineExpose} from "vue";
export default {
  name: "colorModal",
  setup(props, {emit}) {
    const colorMapValChildFn = ()=>{
        //...
    },
    const initCtrlButton= ()=>{
        //...
    },
    //需要返回给父组件的方法,用defineExpose传递出去
    defineExpose({
      colorMapValChildFn
    })
    return {
      //当然,在setup里也要return
      colorMapValChildFn
    }
  }
}

父组件调用代码:

<template>
    <!--注意这个ref,是方法传递的关键-->
    <ColorModal ref="colorMapValFn"></ColorModal>
</template>
<script>
import {reactive, toRefs, ref,computed, onMounted} from 'vue';
import ColorModal from "@/views/template/components/colorModal";
export default {
  name: "configModal",
  components:{
    ColorModal
  },
  setup(props, {emit}) {
      //在setup里获取ref对象
      const colorMapValFn =ref(null);
      //通过ref对象的value就可以调用子组件的方法了
      colorMapValFn.value[0].colorMapValChildFn();
  }
}
</script>