兄弟组件传值$on无法接收值

这篇具有很好参考价值的文章主要介绍了兄弟组件传值$on无法接收值。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

方法一

前提是必须引入EventBus,而且该方法一刷新数据就没了

1.组件A里,点击事件里面使用$emit传入数据

2.组件A里,mounted里面使用$on接收数据,并把数据赋给EventBus

        EventBus.$on('detail',(data) => {

                EventBus.senddata = data

})

3.组件B里,在created里直接使用console.log( EventBus.senddata) ,即可输出

方法二 

前提是必须引入EventBus,而且该方法一刷新数据就没了

1.组件A里,点击事件里面使用把要传的数据赋给Data里的属性

2.在beforeDestroy,组件销毁之前把data里的数据通过$emit传过去

 beforeDestroy(){

      EventBus.$emit('detail',this.detail)

    }

3.在B组件里面用$on接收数据 文章来源地址https://www.toymoban.com/news/detail-453584.html

到了这里,关于兄弟组件传值$on无法接收值的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • watch监听,解决Vue3父组件异步props传值,子组件接收不到的问题

    写静态数据的时候父组件传值子组件接收并渲染是没问题的,但当父组件异步获取数据,子组件接收数据会晚于渲染,就会产生接收不到的问题,我在用echarts绘制图表时图表就直接不显示  用watch监听props数据并在watch内进行赋值操作可解决该问题 直接上代码 父组件,vue3语法

    2024年02月15日
    浏览(43)
  • vue.js兄弟组件方法调用b组件调用a组件方法

    vue.js 中兄弟组件方法调用 场景:父组件中同时引入两个子组件(A和B),此时B组件点击按钮需要调用A组件里面的方法 方案1:vue的事件总线 方案2:自定义事件($emit) 最终方案:方案2 具体操作 B组件上添加一个自定义的事件,这个是B组件传递给父组件的 @getList=getlist A组件

    2024年02月13日
    浏览(42)
  • [uniapp] 跨页面传值 uni.$emit 和 uni.$on 的使用方法 以及遇到的坑

    uni.$emit 和 uni.$on 是uniapp自带的跨页面传值    vue 父子通讯可以用 props  this.$emit   这种简单的父子通讯紧适用于 页面和组件 或者 组件之间的传值,他并不适用于页面和页面的互相传值 那要实现页面通讯呢,我们一起来看看uni.$emit 和 uni.$on的使用方法 示例:         A页面

    2024年02月02日
    浏览(41)
  • vue3组件传值方法

    提示:vue组件传值学习用vue3语法 提示:以下是本篇文章正文内容,下面案例可供参考 1.在父组件中引入子组件并通过 components 注册 父组件内容示例: html 内容 js 内容 import child from \\\"../components/Child/Child\\\"; 子组件内容示例 html 内容 js 内容 props: { msg: { type: String, default: \\\"\\\", }, },

    2024年02月07日
    浏览(34)
  • vue父子组件之间传值的方法

    父传子 方式: props 效果: 把父组件的 fatherName 属性传入子组件,在子组件中使用 父组件代码: 子组件代码: 子传父 方式: $emit 效果: 在子组件触发事件,修改父组件的fatherName属性 父组件代码: 子组件代码: 兄弟传值 方式: eventBus.js 效果: 任意组件之间相互传值 代

    2024年02月09日
    浏览(43)
  • uniapp父子组件传值三种方法

    uniapp,父组件向子组件传值有三种方法,分别为props、slot,和ref props 这个应该是最简单最常用的方法,就是子组件写变量,然后把变量名字在js中进行props slot 插值比较灵活,可以在任何需要写入的地方进行slot ,slot写入name标签后,在父组件进行插值#name ref 函数控制 这个是

    2024年02月13日
    浏览(46)
  • Vue3中子组件向父组件传值的方法

    父组件可以通过props向子组件传值, 子组件可以用过 emits(‘update:prop’, propValue) 修改父组件绑定在此Prop上父组件的值 本文演示了一个可以缓存分页大小(每页显示几行数据)的分页组件的使用, 它是对el-pagination做了一个简单的封装 如下是一个分页组件 核心: 在换页时通过 emit

    2024年02月16日
    浏览(38)
  • Vue子组件向父组件传值(this.$emit()方法)

    首先必须在父组件中引用子组件,然后实现传值 第一步 在父组件中引入子组件 使用import引入组件 声明 使用 第二步 子组件向父组件传值 1.  在子组件中需要向父组件传值处使用this.$emit(\\\"function\\\",param);    //其中function为父组件定义函数,param为需要传递参数 2.  在父组件中子

    2024年02月10日
    浏览(30)
  • vue组件间传值的六种方法

    父组件代码: 子组件代码: 页面显示: 子组件代码: 父组件代码: 页面显示: 父子组件传值原理:父子组件的关系可以总结为 prop 向下传递,事件向上传递。父组件通过 prop 给子组件下发数据,子组件通过事件给父组件发送消息,如下图所示: ref:如果在普通的 DOM 元素

    2024年02月15日
    浏览(49)
  • vue2中几种组件传值方法

    父组件在子组件标签中传入fatherMess,在子组件使用$emit,约定子传父事件名,将子组件的数据传递到父组件.通过按钮修改,可以发现,这里的传值是响应式的 步骤 : ​ 1.在父组件中给子组件标签添加属性 ​ 2.在子组件中使用props接受数据 ​ 3.子组件中使用数据,可以直接访问 父组件

    2024年02月22日
    浏览(34)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包