vue3通过ref调用子组件方法，第一次点击报找不到该方法，ref和v-if冲突

通过ref实现父子组件通信，但在第一次点击按钮的时候报找不到子组件的方法

原因：ref和v-if冲突,ref只有在组件渲染完成才注册引用信息，v-if首次为false没有把元素或子组件渲染，所以没有注册引用信息。

父组件

<uni-popup ref="popup" type="bottom" background-color="#fff">
    <Address ref="getAddress" v-if="popupName === 'address'" 、@close="popup?.close()" />
    <Service v-if="popupName === 'service'" @close="popup?.close()"/>
    </uni-popup>

子组件

//获取地址列表
let getMemberList = async () => {
  let res = await reqGetAddressList()
  console.log(res)
  getList.value = res.result
}
//这里因为使用了setup语法糖的形式，所以需要向外暴漏，父组件才可以进行使用
defineExpose({
  getMemberList,
})

解决办法：

1. ref所在的标签不要用v-if，使用v-show就好了。并且ref的父级标签也不要用v-if。能用v-show就用v-show。否则就会出现找不到子组件方法
2. 使用定时器(不推荐)
3. 使用vue3的nextTick方法，让调用ref组件方法的逻辑放到下一个时间片执行即可。（推荐）