Vue3之父组件调用子组件的方法 保姆式讲解

最新推荐文章于 2024-02-26 13:54:51 发布
最新推荐文章于 2024-02-26 13:54:51 发布
阅读量2k 收藏 5
点赞数 5
文章标签： javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_59740778/article/details/125033414
版权

没有错,这又是一篇保姆级别讲解,因为为了照顾跟我一样的前端菜鸡~~~ 哈哈

废话不多bb 开干！！

第一步我们老步骤 在组件里面创建一个 实例 ref = "sonRef"

记住了 在vue3里面创建实例 是要声明这个变量的 不然找不到this的指向 我是不是很聪明呢 嘻嘻

触发 的方式就是 sonRef.value . 子组件的方法

好了你们以为这就完了？？？？？？

来试试一下

我们会发现

特娘的竟然报错了 这是为什么呢?原来..

原来是因为vue3设计的时候就是这样 组件的方法想要被外部使用必须暴露出去

 

加上这句话就行了  

好了 ..  完稿

 

辉辉~~~
关注
  • 5
    点赞
  • 踩
  • 5
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
vue 父组件调用子组件方法及事件
08-27
主要介绍了vue 父组件调用子组件方法及事件的相关资料，父组件传入数组子组件循环来创建不同的组件模块,所有事件都在子组件内部.怎么实现这样一个功能呢？接下来跟随脚本之家小编一起看看吧
Vue父组件调用子组件事件方法
08-27
下面小编就为大家分享一篇Vue父组件调用子组件事件方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
VUE3子组件实例方法暴露（导出）方法
最新发布
HanXiaoXi_yeal的博客
02-26 1298
只需以上步骤即可访问子组件实例方法。
vue3.x 之 ref
不知道写的什么
10-13 975
<template> <div> {{ count }} <button @click.prevent="Add">Add</button> </div> </template> <script lang="ts"> import { defineComponent, ref } from 'vue'; export default defineComponent({ name: 'Hello
vue3 调用子组件的方法
qq_38946996的博客
11-25 8320
vue3 调用子组件的方法
vue3父组件调用子组件的方法
weixin_43992935的博客
11-18 1万+
vue3父组件调用子组件的方法
vue3 父组件调用子组件的方法
热门推荐
xiao_cheng_的博客
01-29 2万+
vue3调用子组件的方法 子组件 <template> <div></div> </template> <script setup> import { defineExpose } from 'vue' const dialogShow = (data) => { console.log(data) } defineExpose({ dialogShow }) </script> 父组件 <template&
Vue3父组件触发子组件方法
wangwengrui40的博客
05-16 4526
函数中定义一个方法来触发子组件的方法。然后在模板中绑定一个按钮，当点击按钮时，调用。来获取子组件实例，然后调用子组件的方法。在Vue3中，可以通过。来获取子组件实例，并在。2.在父组件中，使用。
vue3父子组件传参以及父组件调用子组件的属性或方法
Mike_haohao的博客
06-30 4749
5 子组件向父组件传参，首先是通过在子组件中defineEmits派发一个事件,下面是在子组件中绑定了一个click 事件 ,通过defineEmits 注册了一个自定义事件，点击click 触发 emit 去调用我们注册的事件, 然后传递参数。3 下面这种方式也是通过defineProps接收,但是这种写法是有默认值的，是ts中特有的写法。7 父组件使用子组件的方法或属性，要在子组件中通过defineExpose向外暴露出去。8 父组件中使用子组件的方法，要通过ref获取子组件实例。
vue 父组件中调用子组件函数的方法
10-16
主要介绍了vue 父组件中调用子组件函数的方法，本文通过实例代码给大家介绍的非常详细，具有一定的参考借鉴价值 ,需要的朋友可以参考下
vue 使用ref 让父组件调用子组件的方法
08-28
主要介绍了vue 使用ref 让父组件调用子组件的方法,需要的朋友可以参考下
Vue3父组件调用子组件的方法-子组件向父组件传值
正一品程序员的博客
04-16 4988
setup写法 // 父组件 <template> <div> <h2>我是父组件!</h2> <button @click="handleClick">调用子组件的方法</button> <Child ref="child" @childClick="childClick"/> </div> </template> <script> import {
Vue父组件调用子组件事件的两种方法
风华绝代的博客
11-24 8924
首先我们要了解$on和$emit vm.$on( event, callback )：监听当前实例上的自定义事件。事件可以由vm.$emit触发。回调函数会接收所有传入事件触发函数的额外参数。 vm.$emit( event, […args] )：触发当前实例上的事件。附加参数都会传给监听器回调。 父组件中： <template> <div> <div @click="click">点击父组件</div> .
vue3 父组件调用子组件里的事件方法
shi19970609的博客
04-10 1090
【代码】vue3 父组件调用子组件里的事件方法。
vue3组合式API实现父组件触发子组件中的方法 | vue3中ref的用法 | defineExpose的使用场景
dxy1128的博客
10-12 1667
在 Vue 3 的组合式 API 中，您可以使用 ref 和 value 来获取子组件实例，并调用子组件中的方法。
vue父组件调用子组件this.$refs报错，undefined、not a function问题解决方法
Rocky balboa
08-21 7847
需要拿到ref的下标才行,父beforeCreate->父created->父beforeMount->子beforeCreate->子created->子beforeMount->子mounted->父mounted。这种情况下，一般都是父组件调用子组件方法的时候，子组件还未渲染成功。父beforeDestroy->子beforeDestroy->子destroyed->父destroyed。父beforeUpdate->子beforeUpdate->子updated->父updated。
父组件通过v-for循环调用子组件中的方法报not a function解决办法
kanshanhui的博客
11-10 565
最近项目中遇到一个问题， 就是我在父组件中通过v-for生成了多个相同的子组件，然后在父组件中想要调用子组件的方法时出现了not a function的报错。最后解决方案是 在子组件的ref中绑定了动态ref 然后再去调用方法
Vue3父子组件相互调用方法
不甜呐的博客
02-14 1万+
Vue3父子组件相互调用方法
vue3在父组件调用子组件的方法
07-28
另外，Vue3还提供了选项式API来实现父组件调用子组件的方法。在父组件中使用ref命令关联子组件，并在父组件的methods中定义一个方法，通过`this.$refs.childComp`来访问子组件的数据和方法，例如`let msg = this.$...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值