vue中兄弟组件使用bus公交车传值的问题。

最新推荐文章于 2024-04-29 10:42:46 发布
最新推荐文章于 2024-04-29 10:42:46 发布
阅读量290 收藏 1
点赞数
文章标签： vue.js javascript 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_55690830/article/details/126179220
版权

一.vue中父子传值是在子组props来接收传过来的值。

二.vue中子父传值是通过在子组件中使用this.$emit（“事件名”，this.需要传递的值）来监听一个事件，然后在父组件中调用$emit中定义的事件来接受传过来的值。

三.兄弟之间的传值最简单的方式是通过vuex来进行传值，还有一种方式是通过new一个bus（公交车）对象，具体使用方法如下：A  B兄弟组件 C为单独组件

1.C 中new bus()  export default 出去

2.A 中import bus 

使用bus.$emit()方法传值

3.B中import bus 

通过bus.$on()来接收值

可乐会冒泡158
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Vue.js中兄弟组件之间互相传值实例
10-19
本篇文章主要介绍了Vue.js中兄弟组件之间互相传值实例，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
vue中使用公交车传值
mslmhl的博客
11-30 409
使用eventBus注意事项 需求是：a页面跳转到b页面，使用this.$router.go(-1);跳回并且需要且带参数 第一步：需要创建一个新的js文件（vue使用） import Vue from 'vue' /** * 定义空的vue实例，作为 eventbus实现非父子组件之间的通信(vue2.x中去掉了broadcast) */ var eventBus = new Vue({}); export default eventBus; 第二步：b页面代码 //首先引入 import ev
vue获取兄弟组件的值2020_vue兄弟组件的传值eventbus
weixin_39603604的博客
01-11 583
注：当在a.vue组件上触发点击事件时，就会触发bus上监听的事件，而bus事件监听在b.vue里面，这个时候就会触发b.vue上的事件监听，而通过回调函数，就可以拿到a.vue组件传过来的数据，从而实现兄弟组件通信。###~~bus.jsimport Vue from "vue"export default new Vue()parent.vue父组件import avue from "./a...
vue兄弟传值---使用bus进行组件通信
Daydreame_r的博客
04-06 403
vue兄弟传值---使用bus进行组件通信，如果不移除这个方法，那就会出现多个bus触发，每次这个方法都会停留在vue的生命周期中。==created中创建：==可以在页面还没加载时先拿到数据。
Vue中的事件总线bus
michaelxuzhi___的博客
05-11 345
如果在跨级或兄弟组件中需要进行通信，多次使用$emit方法会显得繁琐不灵活 该事件总线可以发射与监听事件，就像vue实例一般 在main.js中将$bus加入到vue原型中 Vue.prototype.$bus = new Vue() 在某一组件A中，使用$emit来发射事件，一般用于数据更新的情况 this.$bus.$emit("事件名") 在另一组件B中，使用$on来监听事件，A中数据发生变化，B中可以监听到，再执行后续操作 this.$bus.$on("事件名",function(){ 相关操作
vue里创建bus的两用方法及用法（兄弟传值）
Lwh2004的博客
01-19 6746
bue的两种创建方法及使用方法
vue父组件向子组件动态传值的两种方法
08-28
主要介绍了vue父组件向子组件动态传值的两种方法 ,需要的朋友可以参考下
VUE兄弟组件传值操作实例分析
10-16
主要介绍了VUE兄弟组件传值操作,结合实例形式分析了VUE兄弟组件传值操作的原理、步骤、实现方法及相关注意事项,需要的朋友可以参考下
浅谈Vue父子组件和非父子组件传值问题
08-29
本篇文章主要介绍了浅谈Vue父子组件和非父子组件传值问题，具有一定的参考价值，感兴趣的小伙伴们可以参考一下。
vue3组件传值，父子兄弟组件传值
03-14
vue3父子组件传值，vue3组件传值，父子兄弟组件传值，props、emit、eventbus
VUE--公共组件传值并及时监听到数据更新视图
weixin_62355341的博客
03-29 1682
场景：AB两个子组件在 父页面中，（我们险别估损信息为A，立案信息为B） B组件的某个值是和A组件中一样的且A组件值变化B即使监听并渲染.例如：下图总额A组件要把金额传给 B组件的估损金额框，A金额变B也变 金额已经绑定在A组件中 用兄弟传值把A组件的金额传到B组件的估损金额 1.兄弟组件的语法是。先建一个bus.js文件 import Vue from 'vue' export default new Vue() 2.在A组件中引入bus.JS 3....
vue的事件总线，事件公交（实现组件的传值）
weixin_45664217的博客
08-21 346
这里用StudentA 组件和StudentB 组件的传值为例 StudentA组件传值给StudentB 首先需要在入口文件main.js需要在vue的原型上面挂载bus Vue.prototype.bus = new Vue() 2.StudnetA 组件中的写法： this.$emit(‘hello’, 传的数据)触发需要传递到组件上面的hello事件 <template> <div class="studentA"> <h1>A同学的姓名和年.
vue事件车的两种应用
HWSss的博客
03-11 782
第一种 在vue脚手架中 创建uilts 中创建一个 eventBus.js文件 // 在js文件中 import vue from "vue"; export default new vue() // 在其他文件中引入该文件 import EventBus from "uilts/eventBus" EventBus.$emit("事件",数据) //订阅事件 在其他文件中触发事件 i...
三、VUE数据代理
最新发布
D_A_I_H_A_O的博客
04-29 314
Vue中的数据代理：通过vm对象来代理data对象中属性的操作（读/写）
vue实现录音并转文字功能，包括PC端web，手机端web
byebukesi的博客
04-26 474
不止vue，不限技术栈，vue2、vue3、react、.net以及原生js均可实现。
vue+element 树形结构 改成懒加载模式(原理element有),这里只做个人理解笔记
xu_duo_i的博客
04-25 392
vue+element 树形结构 改成懒加载模式(原理element有),这里只做个人理解笔记
党务学习|基于SprinBoot+vue的大学生党务学习平台(源码+数据库+文档)
伟庭的博客
04-27 668
大学生党务学习平台管理系统按照操作主体分为管理员和用户。用户的功能等。该系统采用了Mysql数据库，Java语言，Spring Boot框架等技术进行编程实现。大学生党务学习平台管理系统可以提高大学生党务学习平台信息管理问题的解决效率，优化大学生党务学习平台信息处理流程，保证大学生党务学习平台信息数据的安全，它是一个非常可靠，非常安全的应用程序。大学生党务学习平台管理系统；入党申请,党课Mysql数据库；Java语言。
vue 快速入门 系列 —— 玩转 CMS
ZL4120505的博客
04-29 583
例如 src/layouts/BasicLayout.less，里面包含一些基本布局的样式，被 src/layouts/BasicLayout.vue 引用，项目中使用这种布局的页面就不需要再关心整体布局的设置。好比中医发展了好几千年，许多本源的东西老中医也是不清楚的，但我们摸索出一套规则，按照这个能治病，这个就很好。.clearfix() 混合器定义了清除浮动的样式。组件相关的样式，有一些在页面中重复使用的片段或相对独立的功能，你可以提炼成组件，相关的样式也应该提炼出来放在组件中，而不是混淆在页面里。
vue报错：Do not mutate vuex store state outside mutation handlers.
weixin_44021888的博客
04-25 310
vue报错：Do not mutate vuex store state outside mutation handlers.
vue中兄弟组件传值
11-27
在Vue中，兄弟组件之间的传值可以通过共同的父组件作为中介来实现。具体实现方法如下： 1.在父组件中定义一个数据属性，用于存储需要传递的值。 2.在需要传值的兄弟组件中，通过$emit方法触发一个自定义事件，并将需要传递的值作为参数传递给该事件。 3.在父组件中监听该自定义事件，并将接收到的值存储到数据属性中。 4.在另一个需要接收传值的兄弟组件中，通过$on方法监听该自定义事件，并在回调函数中获取父组件中存储的数据属性的值。 下面是一个示例代码： ```html <!-- 父组件 --> <template> <div> <child-a @send-data="handleSendData"></child-a> <child-b :data="receivedData"></child-b> </div> </template> <script> export default { data() { return { receivedData: '' } }, methods: { handleSendData(data) { this.receivedData = data } } } </script> <!-- 子组件A --> <template> <div> <button @click="handleClick">传递数据</button> </div> </template> <script> export default { methods: { handleClick() { this.$emit('send-data', 'hello world') } } } </script> <!-- 子组件B --> <template> <div> <p>{{ data }}</p> </div> </template> <script> export default { props: ['data'] } </script> ```

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值