关于Vue子组件调用父组件函数方法不成功的情况

最新推荐文章于 2024-05-28 18:37:06 发布
原创 最新推荐文章于 2024-05-28 18:37:06 发布 · 1.7k 阅读 · 1 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#vue

本文探讨了在Vue.js中，子组件调用父组件方法的两种方式：直接调用this.parent.func()与通过事件总线this.emit('func')的区别。在单一子组件层级下，直接调用方法可行且未引发bug，但在多层子组件嵌套时，推荐使用事件总线方式，以避免潜在的问题。

主要比较两种调用方法：this.parent.func()∗∗和∗∗this.parent.func()**和**this.parent.func()∗∗和∗∗this.emit(‘func’)
项目原来使用this.parent.func(),在一层子组件尚行，未出现bug,但是多层子组件嵌套时，最好使用this.parent.func(),在一层子组件尚行，未出现bug,但是多层子组件嵌套时，最好使用this.parent.func(),在一层子组件尚行，未出现bug,但是多层子组件嵌套时，最好使用this.emit.(‘func’)

先这样吧，有事走了！

Vue2中子组件调用父组件的方法，父组件调用子组件的方法，父子组件互相传值和方法调用
共同学习，共同成长
05-10 7181
Vue2中子组件调用父组件的方法，父组件调用子组件的方法，父子组件互相传值和方法调用
vue.js中父组件调用子组件的内部方法示例
11-30
在Vue.js框架中，父组件调用子组件的内部方法是一种常见的交互方式，尤其是在复杂的组件交互场景下。这里我们将详细探讨如何实现这一功能，并通过一个示例来具体说明。 首先，我们要了解Vue.js中的`ref`属性。`ref`...
vue子组件调用父组件方法$emit调用不到的问题
爱心觉罗
08-18 1331
【代码】vue子组件调用父组件方法$emit调用不到的问题。
vue子组件调用父组件方法$emit没有生效
qq_35567179的博客
09-12 7861
一开始查百度，别人都说 this.$emit(方法名, 参数);里面的方法名不能是驼峰法，试了下不行； 还有说emit不能写在axios里的，于是我拿到外面去了也不行； 最后谷歌查，原来是父组件里的子组件需要注册一下被监听的方法 parent组件 <el-parent> <wx-upload v-on:uploadsuccess="UploadSuccess"></wx-upload> </el-parent> ... <sc
Vue $emit()不能触发父组件方法，Vue子组件向父组件使用自定义事件$emit传递数据无效的坑
m0_61672533的博客
01-03 1361
Vue子组件向父组件使用自定义事件$emit传递数据无效的坑
vue中实现在子组件中刷新父组件
liyiliang123的博客
09-10 3795
一、首先是父组件，现在父组件中的子组件属性上添加监听事件，signStatusVerdict 二、其次是子组件，发射一个事件给父组件的监听属性 三、最后是父组件，父组件中监听到事件后会执行listenSignStatus方法，执行更新父组件列表操作 ...
Vue 子组件使用 this.$parent 无法调用父组件中的方法
godev的博客
04-22 4542
this.$parent 无法调用父组件中的方法1. 遇到的问题2. 分析3. 解决4. 总结 1. 遇到的问题 在开发 Vue 项目中，遇到了一个这样的问题: 其中UI框架使用的是iview UI , 在子组件中利用 this.$parent.getList() 调用父组件中的 getList() 方法, 发 现调用不到该方法, 然后通过 this.$parent.$parent.getList() 就可以调用到 2. 分析 在子组件中打印 this.$parent，通过控制台的打印，发现打印出来
vue 父组件中调用子组件函数的方法
10-16
以下详细介绍Vue中父组件调用子组件函数的方法及其知识点。 首先，要理解Vue组件的定义与引用方式。一个Vue组件可以通过`<script>`标签定义，并注册到Vue实例中。当在父组件中需要引用子组件时，通常需要使用`...
Vue子组件向父组件通信与父组件调用子组件中的方法
08-27
Vue 子组件向父组件通信与父组件调用子组件中的方法 Vue 子组件向父组件通信是指子组件将数据或事件传递给父组件的过程，而父组件调用子组件中的方法则是指父组件可以调用子组件中的方法来实现某些功能。这两种方式...
uniapp this.$parent子组件调用父组件方法在H5环境不生效问题
最新发布
m0_71739658的博客
05-28 463
关于 this.$parent方法在H5环境不生效问题
Vue在子组件传父组件的事件无效的问题
sunlando的博客
12-16 1166
Vue在子组件穿父组件的事件无效的问题 this.$emit('isShow') 这边$emit不支持驼峰语法
【问题】子组件中发送请求携带参数取不到父组件传递的值
weixin_53500514的博客
04-15 558
首先描述问题 子组件中，想用到父组件中的id值发送请求 子组件中，声明了一个props参数，接收父组件传过来的值 userId: { type: String, default: null } 当我子组件发送请求时,调用this.userId时发送请求失败，this.userId的值为undefined 子组件<assignRole /> async getHeaderById() { const { roleIds } = await getHe
vue+element 子组件调用父组件失败
weixin_43721554的博客
10-01 1927
项目中遇到vue子组件调用父组件的方法，我写的是this.$emit('search');但是没有成功，查了下说有三种子组件调用父组件的方式： 第一种方法是直接在子组件中通过this.$parent.event来调用父组件的方法 父组件 <template> <div> <child></child> </div> </template> <script> import child from '~
vue 父子组件传值及不生效问题
sky_sunshine_x的博客
09-02 3934
1.父组件 <!--顶部--> <topHead :parent="testdata" v-if="testdata.length>0"></topHead> data() { return { testdata:[], }} methods: { //获取信息 getBannerList(){ getHone().then(response => { this.testda
vue:多重嵌套的子组件调用父组件方法
FlowingRiver
01-06 2059
vue中子组件调用父组件一般用emit方式,如下: 父组件: methods:{ fathermethod(param){ console.log(param) } } 子组件: this.$emit("fathermethod",param) 对于多层嵌套的父子组件,用emit会无效. 可使用provide/inject方式: 父组件: data () { return { } }, methods: { XXXX(param){ } },
Vue3.x中子组件调用父组件的方法
世纪末的架构师的博客
08-07 4890
文章目录前言一、问题描述二、解决方法1. 问题原因2. 解决办法总结 前言 困难与折磨对于人来说，是一把打向坯料的锤，打掉的应是脆弱的铁屑，锻成的将是锋利的钢刀。 前端时间在开发项目时使用npm来自动创建vue cli项目，由于之前使用的Vue都是2.x的版本，现在通过npm自动导入的vue版本是3.x的，两个版本上的语法做了相应的调整与改变，无论是vue-router还是其他vue生态，都让我结结实实的踩了不少坑，也很庆幸从坑中爬了出来并在此留下记录，本文解决我当时在子组件中如何调用父组件中的方法。
vue3.0 子组件调用父组件中的方法
m0_54850952的博客
03-06 716
在vue2中，子组件调用父组件，直接使用this.$emit()即可。 但是在vue3中，很显然使用this.$emit() 已经开始报错了，为什么会报错呢？ 原因是：在vue3中setup是在声明周期beforeCreate和created前执行，此时vue对象还未创建，因此我们无法使用this。 那么我们在vue3中，子组件该如何调用父组件的函数呢？ 方法一： 首先写一个 Child.vue，重点在 setup 函数中引入 context 形参，配合 emit 使用。定义了两个函数，toFather
【Vue3】父子组件传值、方法调用
tanpenggood
09-01 789
Vue3 父子组件传值、方法调用
[vue3] 子组件调用父组件的多种方法
热门推荐
wyy7293的博客
04-02 3万+
子组件调用父组件的方法 方法1 - 异步方式 父组件定义供子组件调用的xx方法 @updata:xx=xx 子组件中在setup的emit方法调用 context.emit(‘update:xx’) 注意: .sync 在这里不好用 父组件组件 <my-childe ref="RefChilde" @update:xx="xx[被子组件调用的自身方法]"></my-childe> 子组件组件 setup(props, context) { function fn
vue2 子组件调用父组件函数
08-25
- *1* *2* *3* [Vue子组件怎么调用父组件的方法 Vue子组件调用父组件函数的三种方法](https://blog.youkuaiyun.com/qq_45466204/article/details/126232074)[target="_blank" data-report-click={"spm":"1018.2226.3001....
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值