vue3父组件通过ref调用子组件方法显示undefined的问题(子组件使用setup语法糖)

已于 2023-02-13 17:38:46 修改
阅读量5.3k 收藏 2
点赞数 5
分类专栏： vue 文章标签： vue.js 前端 javascript
于 2023-02-13 17:33:04 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_40565812/article/details/128787124
版权

  在vue3中父组件使用ref调用子组件的时候,出现获取不到改方法的情况

父组件：

子组件(子组件使用的是setup语法糖的写法): 

 

 我们通过打印她这个组件发现子组件内部并没有把方法暴露出去

 查询官网之后发现使用setup语法糖的写法,默认是不会把参数已经方法暴露出去的

vue3官网应用

解决方法：

 官网说需要加上一个defineExpose编译器进行导出,于是我们加上之后再查看子组件的打印

 备注:子组件没有使用setup语法糖是不需要进行defineExpose的导出的,内部会默认导出

这个时候已经可以获取到通过 defineExpose导出的方法了

肖富贵…
关注
专栏目录
Vue3 - 解决报错 Uncaught (in promise) TypeError: Cannot read properties of null (reading ‘insertBefore‘)
王佳斌
07-16 3318
vue3，nuxt3，无法读取null的属性（读取“insertBefore”），vue3 insertBefore，报错，Uncaught (in promise) TypeError: Cannot read properties of null (reading ‘insertBefore‘)，详细解决，v-if 导致，v-show，渲染时报错，dom元素，改变时报错，组件，插件，vue版本升级，依旧报错，还是不行，改了还报错，点击按钮展示弹框报错，本地启动时，页面所有操作正常，显示正常；部署到生产环
vue3 ＜script setup＞ 执行子组件里的方法函数
iZaiZaiA的博客
07-13 6207
vue3 script setup 执行子组件里的方法函数 在搞自定义组件开发的时候，遇到的问题，vue2时，子组件里的方法函数，可以直接通过 this.$refs.xxx.xxxx() 来执行，但在vue3中，尤其是 <script setup> 中，是不允许这样的，由于 <script setup> 目前没啥文档，相关资料，不太好找，最后再github反馈，才找到解决方案，这个方案，很简单，实际上，就是vue2的思维，没转换过来。 自定义组件 <template>
vue调用ref，子组件undefined问题，原因是v-if
qq_39117154的博客
08-16 3391
vue，ref，v-if
vue中使用refs定位dom出现undefined的解决方法
11-29
之前在公司做项目，一直感觉用ref来定位dom节点挺方便的。但是期间遇到了一个问题，就是在mounted(){}钩子里面使用this.$refs.xxx，打印出来的却是undefined？ 于是我就对比了一下之前使用ref定位的.vue文件，发现了他们之间的区别。 我们要想知道为什么会定位不到某个DOM节点，我们首先要理解mounted(){}这个钩子函数是用来做什么的。 下面是vue官方给出的vue生命周期（部分），正如官方所说的一样，一开始不必先理解，不过随这你的学习与使用，他的参考价值会越来越高。   原来，mounted阶段，DOM结构准备就绪，但是这里的准备就绪需要特别说明一下： D
vue3父组件调用子组件方法，值为undefined
weixin_51523667的博客
07-17 1727
注意：在父组件中引入子组件不要使用v-if，否则打印的value值为undefined。2.定义方法并通过defineExpose方法暴漏出去，并在return中返回。2.定义与ref名字一样的值，并在return中返回。子组件：1.引入defineExpose方法。问题：在负组件中调用子组件方法找不到值。父组件：1.定义ref。
vue3中通过ref获取子组件实例，取值为undefined
weixin_51747462的博客
09-09 5050
也就是Vue3如何通过 ref 获取子组件实例(子组件中的DOM结构、数据、及方法)；vue3中通过ref获取子组件实例，取值为undefined
解决vue3父组件执行子组件方法报错：TypeError: Cannot read properties of null
jiaohuizhuang6019的博客
11-06 3696
解决vue3父组件执行子组件方法报错：TypeError: Cannot read properties of null
Vue3 v-for绑定的dom获取ref为undefined
Michelle209的博客
03-22 846
playersRef.value有数据，但是playersRef.value[0]为undefined。P.S. 如果把方法放到updated里面会一直请求数据，就没用updated。用nextTick再调用一次。
vue3 setup语法糖
lhblmd的博客
06-28 616
vue3 setup语法糖
最新 Vue3、TypeScript、组合式API、setup语法糖 学习笔记
qq_33365152的博客
02-18 1116
最新 Vue3、TypeScript、组合式API、setup语法糖 学习笔记
vue3中setup、ref、reactive、响应式
qq_45018844的博客
01-20 3519
vue3语法格式 vue3提供的都是按需导入的方法，函数 setup函数是vue3中专门为组件提供的新属性。 <template> <div> {{name}} </div> </template> <script> import { reactive } from "vue" export default { props:{ item:String } //setup函数会在beforeCreate之后，crea
Vue3笔记_＜入门基础篇＞
weixin_63877292的博客
12-07 164
语法:RefImpl 引用的实现的实例对象说明JS中操作数据：xxx.value模板中操作数据:不需要.value，因为浏览器解析的时候已经把value给解析了用ref包括的基本类型数据是RefImpl的实例对象注意在vue3中，想把普通的number,string,bollean编程响应式的数据，就必须要借助refref定义对象类型的数据，底层原理是利用了ES6的proxy实现的响应式，而在vue3中，对proxy的操作封装在了一个叫reactive的新函数中。
Vue3框架：一套武功秘籍即可上手 Vue3 项目开发需求：setup（原生 + 语法糖） && Vue3组合式 API 新特性 + Pinia状态管理工具 && Pinia持久化本地存储
最新发布
Forever_Hopeful的博客
04-13 97
Vue3框架：一套武功秘籍即可上手 Vue3 项目开发需求：setup（原生 + 语法糖） && Vue3组合式 API 新特性 + Pinia状态管理工具 && Pinia持久化本地存储
【解决vue3父组件通过ref调用子组件方法undefind问题】
qq_30312887的博客
03-10 2597
解决vue3父组件通过ref调用子组件方法undefind问题
Vue------vue3中ref函数的使用(ref获取元素undefined)
COCOLI_BK的博客
07-12 7959
答：不一致可以的，但是最终return中的名字要和ref中的值一致！！！
vue3 父组件调用子组件的方法时报错:XXXX does not exist on type ‘never‘
晨曦的博客
07-19 2186
首先我在setup里面进行ref(null);想打印一下有没有东西,好吧!发现真的没有东西,然后我意识到setup里面还没有挂载完,然后我把打印放到onMounted里面,获取到了。我数据是全部获取到了,但我调用的时候却报错,看debugger调试的确调用了方法,但页面就是报错,说null类型没有属性,然后发现是vscode无法判断对象类型,于是乎,我给他增加声明断言，强制执行。才开始学习vue3+ts,进行实战就遇到一堆问题,写了一个子组件,我想在父组件里面调用它....
vue3 ref拿dom一直是undefind
09-06 358
原因是自己在上级节点写了个v-if=“load” ref节点一直没有mounted。也没有赋值到ref里面。
vue3.2父组件调用子组件方法报TypeError: xxxx is not a function
luozaiyong的博客
04-12 1902
vue3.2父组件调用子组件方法报 xxx is not a function。
vue3 ref获取节点生产环境undefined
weixin_43110440的博客
11-11 889
vue3生产环境获取节点失败
上述formRef是什么，const formRef = ref(null);有什么用
07-12
`formRef` 是一个在 Vue 3 中使用 Composition API 创建的引用对象。它的作用是用来获取 Ant Design Vue 的 Form 组件的实例，以便在代码中使用该实例进行相关操作，例如触发表单验证。 在上述示例中，我们使用 `ref(null)` 创建了一个初始值为 `null` 的引用对象 `formRef`。然后，在 `<a-form>` 标签上使用 `ref="form"` 将这个引用对象与 `<a-form>` 组件关联起来，使得 `formRef` 可以引用到 `<a-form>` 组件的实例。 通过这种方式，我们可以在代码中通过 `formRef.value` 来访问 `<a-form>` 组件的实例，并调用该实例的方法、访问属性等。在示例代码中，我们使用了 `formRef.value.validate` 方法来触发表单验证。 需要注意的是，在 Vue 3 中，由于 Composition API 的特性，我们需要使用 `.value` 来访问引用对象的值。 希望这个解释清楚了 `formRef` 的作用和用法。如果你还有其他问题，请随时提问。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值