Vue3调用ref绑定组件的click方法报is not a function错误

触发报错的核心代码如下：

<template>
        <RecyclablesPopup ref="LVP" class="inline-block m-5px"></RecyclablesPopup>
</template>

<script setup>
import RecyclablesPopup from "../components/popups/RecyclablesPopup";
import { ref } from 'vue';
const LVP = ref(null);

// 挂载后绑定的旧组件点击事件回调
eventClick: function(calEvent)
    {
        console.log(LVP.value);
        LVP.value.click();
    }
</script>

触发报错：Uncaught TypeError: LVP.value.click is not a function，控制台打印LVP.value可拿到Proxy代理对象。

• Vue 3 <script setup> 语法默认对组件做了作用域封闭，父组件通过ref获取到的子组件实例，默认只能访问Vue内置属性，子组件内部自定义的方法、DOM引用不会主动对外暴露，自然找不到要调用的click()方法。
• 给Vue组件绑定ref拿到的默认是组件实例代理，不是组件渲染后的真实DOM节点，原生DOM自带的click()方法不存在于组件实例上。

根据实际诉求二选一即可：

场景1：要调用子组件内部自定义的click方法 #

在RecyclablesPopup子组件内部，通过defineExpose主动把需要对外访问的方法暴露出去：

<!-- RecyclablesPopup.vue 子组件内 -->
<script setup>
// 子组件内原有click业务逻辑，比如打开弹窗
const click = () => {
  // 业务逻辑代码
}

// 显式暴露给父组件的ref访问
defineExpose({
  click
})
</script>

父组件原有代码无需修改，即可正常调用LVP.value.click()。

场景2：要调用组件根DOM的原生click方法 #

两种实现方式选一个就行：

• 方式1（兼容所有Vue3版本）：在子组件内暴露根DOM引用

<!-- RecyclablesPopup.vue 子组件内 -->
<template>
  <div ref="popupRoot">
    <!-- 弹窗原有内容 -->
  </div>
</template>
<script setup>
import { ref } from 'vue'
const popupRoot = ref(null)
defineExpose({
  popupRoot
})
</script>

父组件调用时改为：

LVP.value.popupRoot.click()

• 方式2（Vue 3.3+支持，无需修改子组件）：直接在父组件模板的ref上标记获取根DOM

<template>
  <RecyclablesPopup ref="LVP" class="inline-block m-5px" vue:$el></RecyclablesPopup>
</template>

此时LVP.value直接就是组件渲染后的根DOM节点，原有LVP.value.click()代码可直接运行。

内容的提问来源于stack exchange，提问作者PiTheNumber