vue unapp父子组件传值遇到问题记录一下

最新推荐文章于 2024-04-26 16:09:50 发布
最新推荐文章于 2024-04-26 16:09:50 发布
阅读量265 收藏 1
点赞数
分类专栏： uniapp Javascript 文章标签： vue.js 前端 javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_67434908/article/details/130391731
版权

我在页面中封装了一个公共子组件，然后在父组件中调用，具体业务逻辑就是当我点击按钮的时候子组件弹出，点击关闭的时候子组件关闭缩回去。

遇到的问题：第一次点击弹出的时候没问题，第二次点击关闭的时候也关闭了，但是我第三次点击的时候（就是关闭了的时候）他并没有生效，控制台第三次点击弹出打印的才是false，只有我第四次点击的时候才弹出

 

 这里的错误是我只是在子组件中使用了emit，然后并没有在父组件中接收，父组件中只有接收后才可以使用子组件传过来的值

改正过后的代码：需要在父组件中定义接收函数

 

 

不爱敲代码的大帅比
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
vue3问题记录 父组件给子组件传值 监听方法 第一次没反应
小学僧的学习笔记
01-20 1054
参考： vue中watch高级用法（deep和immediate） https://blog.csdn.net/weixin_45389051/article/details/118278739?spm=1001.2101.3001.6650.1&utm_medium=distribute.pc_relevant.none-task-blog-2%7Edefault%7ECTRLIST%7Edefault-1.pc_relevant_default&depth_1-utm_source=d.
浅谈Vue父子组件和非父子组件传值问题
08-29
Vue 组件传值问题是 Vue 开发中非常重要的一个话题，涉及到父子组件和非父子组件之间的传值问题。今天，我们将一步步地介绍如何在 Vue 中实现组件传值。 组件的创建 创建组件是 Vue 开发的基础步骤。下面是一个...
uni-app 父组件无法获取到子组件传来的值，为undefined；父子组件传值undefined
weixin_46221198的博客
07-31 1640
一开始写的 <uni-modle ref="uniModle" @handleButton="handleButton()"></uni-modle> // 用户点击了弹窗按钮 handleButton(e){ console.log(e);//undefined }, 问题：函数名不需要 套上引号 ，括号也不需要 更正： <uni-modle ref="uniModle" @handleButton = handleButton></uni-mod
uniapp子组件事件第二次进来失效
最新发布
资深Bug开发大师
04-26 322
使用uniapp子组件时，子组件的事件第二次进来时失效，比如自定义一个升级弹窗，没升级频繁切换时都要弹出，这时发现第一次生效，再进来不显示了，解决方法
uniapp 父子组件传值 第一次触发事件，子组件接收不到
L_C_sunny的博客
03-04 820
【代码】uniapp 父子组件传值 第一次触发事件，子组件接收不到。（解决方法）
vue element 父传子,第一次传不过去
u013170178的博客
04-22 1627
父页面：A 子组件:B 子组件方法：init 传值：id 相关代码描述： 进入A界面，点击调用按钮，调用B组件里的方法init()（B组件相当于是一个弹窗）， 引用B组件代码 A界面调用B组件inti() 的方法 B组件中接收父组件传来的eventId B组件中的init()方法 问题： 进入A界面，点击调用按钮，发现A界面的id并未传过去。 关掉B组件界面。再次在A界调用B组件，发现值传过去了。 刷新A界面，再次尝试，发现结果一样。就是说刚进界面的第一次，值没传过
关于组件异步传值子组件获取不到父组件传递过来值的问题
weixin_44132285的博客
02-23 3425
1.问题描述 父组件异步传值给子组件 子组件第一次接收不到 在此处我传递了一个listinfos值过去给子组件 2.分析问题 1.首先异步问题是由数据传递过来组件已经渲染完成（数据更新后 组件没有进行重新渲染） 2.其次是要判断是否为异步问题，可以再子组件mounted中写一个延时器 延迟获取一下组件的值（如果定时器里面可以获取到，外部获取不到undefined）则证明是异步问题 3.解决问题 可以判断一下父组件中这个值是否取到 如果取到再去渲染组件（这样就可以避免组件渲染渲染完成 值未及时更新）
父向子传值，解决首次没刷新
weixin_45979310的博客
07-27 267
父组件向子组件传值 <div class="content"> <Account v-if="paneName == 1" :user="user"/> </div> 子组件接收值 <el-form ref="form" :model="form" label-width="auto"> <el-form-item label="头像" class="avatarP"> <el-avatar :size="
vue3父子组件传值.doc
02-05
vue3父子组件传值
Vue组件通信中非父子组件传值知识点总结
10-15
总结来说，理解非父子组件传值的关键在于掌握事件总线的使用。通过创建一个独立的Vue实例作为事件总线，组件可以触发和监听自定义事件，以此达到数据的传递。这种方法简单易用，但不适用于大型应用，因为随着组件...
vue单页开发父子组件传值思路详解
08-27
主要介绍了vue单页开发父子组件传值思路详解,本文是小编抽空整理的思路，感兴趣的朋友跟随脚本之家小编一起学习吧
Vue非父子组件之间传值
01-08
非父子组件间的传值(bus/总线/发布订阅模式/观察者模式) // 在每一个组件上添加BUS属性 Vue.prototype.bus = new Vue() Vue.component('child',{ props:{ content:String }, data(){ //子组件不能直接修改...
uniapp 子组件 props拿不到数据_Vue学习笔记之父子组件通信以及经典案例
weixin_39776344的博客
11-21 737
父组件、子组件直接的访问方式：1、父组件访问子组件可以用$childern 或者$refs$childern 的用法：当父组件引用多个子组件的时候，就会生成多个对应的对象：$childern可以访问子组件中的方法、data等数据但$childern一般在开发中比较少用，用$refs比较常用，因为$refs是可以通过key来绝对定位到对应的子组件，这种方法在实际开发中比较常用。$refs是一个对象类...
父组件传的值改变后，子组件通过props接收，但是值在watc中监听不到问题
alice9999999的博客
08-11 804
watch监听
uniapp-父向子组件传值失效解决方案
小元子
10-10 914
【代码】uniapp-父向子组件传值失效解决方案。
Vue【有与无】【F2】父子组件之间的传值
琴韵悠悠
08-27 224
vue 父子组件之间的传值
uniapp+Echartsh子向父传值$emit失效
weixin_55553121的博客
01-06 1890
1.需求：点击柱状图的每一个柱子获取到 id（后台数据props传过来的） 2.失效原因：<script module='echarts' lang="renderjs"> 中不允许使用this.$emit 使用的话我这里是会报这样的错误：TypeError: Cannot read property 'nid' of undefined at view.umd.min.js:1 ,H5不会报错，APP上会报 可以了解一下： renderjs内如何主动发起通讯？ - DCloud问答
解决vue 父组件向子组件传值,子组件接收不到问题
liaoxianhua888的博客
09-09 5180
vue 父组件向子组件传值,子组件接收不到问题
vue3中父子组件传值
08-28
在Vue 3中，父组件向子组件传递值可以通过props进行。以下是一个示例： 父组件： ```vue <template> <div> <ChildComponent :message="parentMessage" /> </div> </template> <script> import ChildComponent from './ChildComponent.vue'; export default { components: { ChildComponent }, data() { return { parentMessage: "Hello from parent" }; } }; </script> ``` 子组件： ```vue <template> <div> {{ message }} </div> </template> <script> export default { props: { message: String } }; </script> ``` 在这个例子中，父组件通过props将`parentMessage`的值传递给了子组件的`message`属性。子组件可以通过`{{ message }}`来获取父组件传递的值。 这是一种简单的父子组件传值方法，你也可以使用事件总线、Vuex或provide/inject等其他方式实现更复杂的组件间通信。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值