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

陈熙之

于 2022-03-24 15:42:12 发布

阅读量1.6k

点赞数

分类专栏： Vue Echart

本文链接：https://blog.youkuaiyun.com/cmhdl521/article/details/123711795

版权

Vue 组件隐藏显示 scriptsetup $parent.$refs

关键词由优快云通过智能技术生成

Vue 同时被 2 个专栏收录

36 篇文章

订阅专栏

Echart

4 篇文章

订阅专栏

博主在使用Vue组件时遇到怪异现象，通过$parent.$refs引用组件时，只有在移除<scriptsetup>标签后才能正常操作。文章探讨了scriptsetup的使用限制及解决方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

遇到一个怪异的事情，前端给了一个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

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

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