vue $refs.组件 找组件为{}

遇到一个怪异的事情，前端给了一个VUE页面，里面有5个组件，点击左侧按钮，做隐藏显示。

let jcfw_cpdy = this.$parent.$refs.cpdy;
let jcfw_djcp = this.$parent.$refs.djcp;
let jcfw_fwtj = this.$parent.$refs.fwtj;
let jcfw_yjcp = this.$parent.$refs.yjcp;
let jcfw_znzz = this.$parent.$refs.znzz;

使用这种方式去改变组件的属性

jcfw_cpdy.cpdyshow = false
jcfw_djcp.djcpshow = false
jcfw_fwtj.fwtjshow = false
jcfw_yjcp.yjcpshow = false
jcfw_znzz.znzzshow = true

其他都正常唯独jcfw_cpdy，提示找不到，输出 this.$parent.$refs.cpdy 就是{}

看了很久，文件重建，改名，改注册名，都不行，只有来对比了。

发现这个页面引用的2个ele组件功能

<script setup>
    import { ElMessageBox, ElMessage } from 'element-plus';
</script>

把这个去掉，引用放到<script></script>，就正常了。

去vue看了下，没懂。。路过大神指点下

单文件组件 Vue.js - The 渐进式 JavaScript 框架https://v3.cn.vuejs.org/api/sfc-script-setup.html#%E5%9F%BA%E6%9C%AC%E8%AF%AD%E6%B3%95