Vue 中子组件调用父组件不可调用的问题解决

最新推荐文章于 2023-08-18 17:49:44 发布
最新推荐文章于 2023-08-18 17:49:44 发布
阅读量1.8k 收藏 7
点赞数 4
文章标签： vue.js 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_43247040/article/details/104000020
版权

Vue 中子组件调用父组件不可调用的问题解决

触发场景

在原来的两个页面中（A和B），共用一个子组件（C），使用this. p a r e n t . f n 的 方 式 调 用 父 组 件 函 数 ， 没 有 问 题 。 后 面 因 为 业 务 关 系 ， 把 两 个 页 面 整 合 成 一 个 页 面 ， 其 中 一 个 页 面 变 成 子 组 件 ， 也 就 是 A 成 为 父 组 件 ， B 成 为 子 组 件 ， C 还 是 A 和 B 的 子 组 件 ， 这 个 时 候 ， C 组 件 使 用 t h i s . parent.fn的方式调用父组件函数，没有问题。后面因为业务关系，把两个页面整合成一个页面，其中一个页面变成子组件，也就是A成为父组件，B成为子组件，C还是A和B的子组件，这个时候，C组件使用this. parent.fn的方式调用父组件函数，没有问题。后面因为业务关系，把两个页面整合成一个页面，其中一个页面变成子组件，也就是A成为父组件，B成为子组件，C还是A和B的子组件，这个时候，C组件使用this.parent.fn去调用父组件，失效。解决方式：
this.$emit（‘fn’）

小八是只白猫呀
关注
  • 4
    点赞
  • 踩
  • 7
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
关于vue子组件触发父组件的事件失效问题
IT水很深，路还很长
08-02 2152
父组件 <child @event-name="eventName" @eventName="eventName"> 子组件 调用父组件方法 this.$emit("event-name"); 有效 this.$emit("eventName"); 偶尔会失效 一般写代码，方法名都用驼峰是eventName,但在子组件触发父组件方法时，会将方法名转为小写。看别人文档建议写成...
Vue3组件通信总结
热门推荐
qq_43327962的博客
12-16 1万+
前言 我们知道vue3的Composition Api是它几个最大亮点之一，所以下文都是在setup中演示代码的实现。后面会以开发几个简单form组件为例子来演示。 基本操作 这里先简单开发一个VInput的输入框组件。组件就像一个函数，主要就是处理输入和输出。Vue3在setup函数上提供了两个参数，一个props，一个是context下面的emit方法，分别来处理输入和输出。 props 现在VInput就是子组件，我需要它能够接受父级传递一个值，让它可以帮我做后续的逻辑处理在返回给父级。所以，这里
Vue子组件调用父组件的方法
多凡的博客
08-30 366
父组件 <template> <div> <child @fatherMethod="fatherMethod"></child> </div> </template> <script> import child from '~/components/dam/child'; export d...
vue 父组件调用子组件中方法第一次不执行
细节怪的博客
01-04 1558
vue 父组件调用子组件中的方法，第一次不执行
vue子组件调用父组件方法$emit没有生效
qq_35567179的博客
09-12 6811
一开始查百度，别人都说 this.$emit(方法名, 参数);里面的方法名不能是驼峰法，试了下不行； 还有说emit不能写在axios里的，于是我拿到外面去了也不行； 最后谷歌查，原来是父组件里的子组件需要注册一下被监听的方法 parent组件 <el-parent> <wx-upload v-on:uploadsuccess="UploadSuccess"></wx-upload> </el-parent> ... <sc
vue中子组件调用兄弟组件方法
08-27
Vue 中子组件调用兄弟组件方法总结 在 Vue 中，子组件调用兄弟组件方法是非常常见的需求，本文将介绍如何在 Vue 中实现子组件调用兄弟组件方法。下面我们将详细介绍这个问题。 为什么需要子组件调用兄弟组件方法？...
vue中如何让子组件修改父组件数据
08-27
// 在监听你使用 update 事件来更新 word,而在父组件不需要调用该函数 this.$emit('update:word', newVal); } }, } ``` 3. 在子组件中拷贝一份副本 在子组件中，我们可以拷贝一份父组件传递过来的数据副本，...
vue中子组件和父组件数据同步方案
01-07
子组件中实现对属性的封装，方便父组件一键调用 {{ innerChildCompoentData }} export default { name: 'ChildComponent', props: { childCompoentData: { type: Object, default() { return {} } } }, ...
vue中子组件的methods中获取到props中的值方法
10-18
在Vue.js中，父子组件之间的通信是通过props进行的，其中父组件传递数据给子组件，子组件通过props接收。当我们在子组件的`methods`中需要访问这些props的值时，通常可以直接通过`this.propName`来获取。在描述的...
vue 弹框使用this.$emit调用父组件方法及传参 无效 (已解决)
蓝胖子的博客
10-18 6083
子组件中调用父组件方法及传参 this.$emit无效的问题 最神奇的是并不是所有的emit都失效，只是有些emit的方法名在特定情况下失效。 在项目中刚开始用的是 this.$emit(“方法名”,‘参数’) this.$emit("fathermethod", this.labelTableData); this.$emit 无效. 解决方法: 使用this.$parent.方法名(“参数”)调用 // 关闭弹窗 close() { this.detailVisible
使用vue3的时候父组件向子组件传值，子组件改变数据，父组件无响应
cz2378862893的博客
06-22 3034
vue3中reactive定义的引用类型直接赋值导致数据失去响应式
vue子组件调用父组件方法
Andanc的博客
03-06 377
父组件里先调用子组件的方法: 1.首先引入子组件; import updatePhone from "./loginByPhone"; 2.在components里面初始化子组件 components: { updatePhone }, 3.在template标签内定义一个标签 <updatePhone></updatePhone> 该标签用属性ref来调用组件名 4.在方法内部调用子组件的初始化方法 this.$next
vue子组件调用父组件方法$emit调用不到的问题
爱心觉罗
08-18 868
【代码】vue子组件调用父组件方法$emit调用不到的问题。
Vue3.x中子组件调用父组件的方法
世纪末的架构师的博客
08-07 4593
文章目录前言一、问题描述二、解决方法1. 问题原因2. 解决办法总结 前言 困难与折磨对于人来说，是一把打向坯料的锤，打掉的应是脆弱的铁屑，锻成的将是锋利的钢刀。 前端时间在开发项目时使用npm来自动创建vue cli项目，由于之前使用的Vue都是2.x的版本，现在通过npm自动导入的vue版本是3.x的，两个版本上的语法做了相应的调整与改变，无论是vue-router还是其他vue生态，都让我结结实实的踩了不少坑，也很庆幸从坑中爬了出来并在此留下记录，本文解决我当时在子组件中如何调用父组件中的方法。
如何直接在父组件中使用某个复用组件，而不用引入和注册？
qq_38969618的博客
12-17 432
在项目的components目录下-》新建xxx组件的目录-》在该目录下再新建xxx.vue页面即可。（即复用组件都用单独的文件夹再套一层，命名规范符合：components/组件名称xx/组件名称xx.vue目录结构即可）。 <!-- 父组件页面：可直接使用，而不用import引入组件&components注册> <bottom-btn text="提交" @click="submitApply"></bottom-btn> ... ...
关于Vue子组件调用父组件函数方法不成功的情况
add-oil的博客
08-01 1624
主要比较两种调用方法：this.parent.func()∗∗和∗∗this.parent.func()**和**this.parent.func()∗∗和∗∗this.emit(‘func’) 项目原来使用this.parent.func(),在一层子组件尚行，未出现bug,但是多层子组件嵌套时，最好使用this.parent.func(),在一层子组件尚行，未出现bug,但是多层子组件嵌套时，最好使用this.parent.func(),在一层子组件尚行，未出现bug,但是多层子组件嵌套时，最好使用th
Vue 父子组件方法this.$emit()有时候不触发问题
qq_41580802的博客
10-26 7641
Vue 父子组件方法this.$emit()有时候不触发问题，亲测有效
Vue子组件递归导致this.$emit失效，父组件监听不到
qq_53121751的博客
10-27 2107
Vue子组件递归导致this.$emit失效，父组件监听不到
vue 双向绑定问题$emit无效
luoteen的博客
11-09 3527
父组件变量传给子组件，子组件$emit 触发父组件的方法修改父组件的变量，但是父组件的值变了，子组件的值没有改变 父组件： <div> // 子组件 <son :status.sync="status"/> </div> <script> export default { data(){ return{ status:false } } } </script> 子组件： <div @click="change"&gt
VUE中子组件调用父组件的方法
最新发布
08-28
在Vue中，子组件可以通过不同的方式调用父组件的方法。其中，常见的方式有两种。 第一种方式是通过在子组件中使用`$emit`方法来触发父组件中的方法。子组件可以通过`this.$emit('xxx')`来触发父组件中的`xxx`方法。在父组件中，需要在子组件标签上监听该事件，并绑定对应的方法名。例如，父组件中的代码可以是： ```html <template> <div> <child @xxx="fatherMethod"></child> </div> </template> <script> import child from '~/components/dam/child'; export default { components: { child }, methods: { fatherMethod() { console.log('测试'); } } }; </script> ``` 第二种方式是通过将父组件的方法名传递给子组件，在子组件中调用该方法。父组件需要在子组件标签上使用冒号(`:`)来将方法名传递给子组件。在子组件中，可以直接使用`this.$parent.methodName`来调用父组件中的方法。例如，父组件中的代码可以是： ```html <template> <div> <child :fatherMethod="fatherMethod"></child> </div> </template> <script> import child from '~/components/dam/child'; export default { components: { child }, methods: { fatherMethod() { console.log('测试'); } } }; </script> ``` 以上是两种常见的在Vue中子组件调用父组件方法的方式。根据具体的需求和场景，可以选择适合的方式来实现子组件与父组件之间的方法调用。<span class="em">1</span><span class="em">2</span><span class="em">3</span> #### 引用[.reference_title] - *1* *2* *3* [Vue 子组件调用父组件的所有方法](https://blog.csdn.net/chuziyan/article/details/122088972)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_1"}}] [.reference_item style="max-width: 100%"] [ .reference_list ]

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值