vue里创建bus的两用方法及用法（兄弟传值）

已于 2022-11-09 11:24:19 修改
阅读量6.7k 收藏 19
点赞数 7
分类专栏： vue bus 文章标签： vue
于 2022-01-19 15:02:11 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Lwh2004/article/details/122580665
版权

1.bus用法

 主要是用来帮助父子组件传值

vue中非父子组件之间通信除了用vuex，也可以通过bus总线，两者适用场景不同。

bus比较适合小项目 vuex就不太适用了。bus其实就是利用vue的自定义事件机制，在触发地 方通过$emit向外发布一个事件,在需要监听的页面，通过$on监听事件。

vuex适用中大型项目、数据在多组件之间公用的情况。

2.如何创建bus及用法(两种方法)

（1）第一种方法: 在main.js里创建 挂载原型

        

       // 用法：需要传值组件的写法

        

        //在需要传入值的组件中写法

        

        这样就可以直接拿到传过来的值了

（2）第二种方法 ：新建bus.js文件

        

         bus.js中的内容

        

        用这种方法是需要在两个相互传值的组件中引入此文件

         

         在使用的时候（传值）就只是把this.$bus给去掉了

        

         接收值的时候同理先引入，再用bus.$on在created生命周期里获取

        

 非常的适合组件之间的传值，非常的银杏~

（看不懂的就问奥~）

李木子~
关注
  • 7
    点赞
  • 踩
  • 19
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
新理念外语网络教学平台第二版综合答案BUE.pdf
12-17
新理念外语网络教学平台第二版综合答案BUE.pdf
VueBus
薄荷糖
06-16 184
VueBus(Vue事务总线） Vuex：主要用来存储数据 Bus:公交车 先有接收方： 监听动作 再有触发方： 触发的动作 分三步:导入到项目 1,下包(导包),导入文件, 2,在项目中配置,引入到项目 3,使用 1. 创建一个bus文件夹，里面有个js文件 import Vue from 'vue' const Index = new Vue() export default Index 2.在A,B组件中引入js文件 1）left <templa...
BUE_auditiononline_
09-30
to draw beatup charts
浅谈vue中$bus的使用和涉及到的问题
01-19
Hello大家周末好，最近项目比较忙所以没有及时的更新抱歉，今天给大家讲一vue.bus。使用过的都知道$bus是兄弟之间相互传值的项目中说实话用的地方不算多但是也会用到（每一个领域都是会有坑的呀）。 1：创建$bus文件 创建一个文件内容如下： import Vue from ‘vue’ export default new Vue(); 2：引入$bus main.js: import Bus from ‘./views/bus/bus’; Vue.prototype.$bus = Bus; //注意这里的Vue是我上面引入的vue import Vue from ‘vue’ 3：
台达 BUE系列制动单元说明书（英文）.pdf
10-24
台达 BUE系列制动单元说明书（英文）pdf,台达 BUE系列制动单元说明书（英文）
vue中bus的详细使用
weixin_44020340的博客
09-07 2万+
vue中关于兄弟组件bus的使用方法 首先，bus只能用在兄弟组件之间的传值，其它关系的传值不用bus。 废话不多说，请看下面代码解说 首先，先创建bus.js文件，然后在引用，这里有两种引用方法：局部引用和全局引用。 // bus.js文件内容 import Vue from 'vue' // export default new Vue() const Bus = new Vue() export default Bus 局部引用：是在兄弟组件的文件里面引用bus.js文件 全局引用：是在main.
Vue组件交互之bus模式
夕山雨的博客
06-27 3476
目录一、bus模式简介 一、bus模式简介 bus模式是一种借助事件实现任意两组件交互的解决方案。 通常来说，在不借助bus模式的情况下，事件的触发只会发生在父子组件之间，并且只能由子组件向父组件触发事件。它的大致实现模式如下： parent.vue <template> <child @tick="handleTick" ></child> </template> <script> export default { meth
Vue组件通信之bus详解
kirinlau的专栏
11-28 2935
vue最主要的两大特性就是响应式和组件化，组件化项目少不了组件之间的通讯，那么组件之间到底有几种通信方式呢。今天着重讲一下另外一种事件中转bus，非常简单快捷，不需要走其他中转或者提交事件，只需要触发和监听即可，也是我之前项目中用到比较多的一种，尤其是多组件依赖某一个小的组件的数据时，比如单页面上方有个radio-group，事件触发后需要其他组件同步更新数据时， 尤为好用，
【Vue项目】 bus事件总线
Allen_Sushi首页
11-17 949
Vue2 bus事件总线的原理与使用
详解vue 组件之间使用eventbus传值
08-29
本篇文章主要介绍了vue 组件之间使用eventbus传值。小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
Vue组件创建和传值的方法
10-18
给大家介绍了vue组件创建和传值的方法，创建组件有三种方法，文中给大家介绍的非常详细，父组件传值给子组件的方法，给大家介绍的也非常详细，需要的朋友参考下吧
vue 怎么创建组件及组件使用方法
12-03
组件 (Component) 是 Vue.js 最强大的功能之一。组件可以扩展 HTML 元素，封装可重用的代码。在较高层面上，组件是自定义元素，Vue.js 的编译器为它添加特殊功能。在有些情况下，组件也可以是原生 HTML 元素的形式，...
Vue父子模版传值及组件传值的三种方法
12-29
这里是针对于vue1.0，如果要学2.0，建议大家去看官方文档 vue2.0 http://vuefe.cn/guide/ vue-router2.0https://router.vuejs.org/zh-cn/essentials/getting-started.html ... //省略extend方法，vue内部
vue 中几种传值方法(3种)
10-16
主要介绍了vue 中几种传值方法(3种),文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
vue Bus的使用
qq_37899792的博客
03-19 4660
场景：有时候两个组件也需要通信（非父子关系）。当然Vue2.0提供了Vuex，但在简单的场景下，可以使用一个空的Vue实例作为中央事件总线。 Bus.js import Vue from 'vue' const Bus = new Vue() export default Bus 组件调用时先引入 组件1 import Bus from './Bus' expor...
vue总线bus的使用和移除注意事项
qq_23858785的博客
04-26 1055
vue总线bus的使用和移除注意事项
http://cl.loei.pw/index.php,JalanJiang.github.io/atom.xml at 508a7133c17527250ec573a47889f34aaaaea37...
热门推荐
weixin_39640520的博客
04-06 5万+
薯条是？ Incorrect Password!No content to display!U2FsdGVkX19BmqJcUf4m5iEibdYC3T0KBjt7vAFyeQotANKWvgnzekesIcUXqkl6hh2afG+yhh+5mJ+EjWlEvg7+rQV//gX4Yh7b+YefcFv7t6Hhuby0rqe1fd8G9OiBAtWucIX/BAzT/3U...
vue $bus
qq_44439022的博客
03-04 1152
一、bus的使用流程 1.bus就是vue的一个实例，可以理解为vue实例化后的一个组件 2.var bus = new Vue(); 3.把bus挂载Vue实例的原型对象上，也就是说用Vue实例化的每个组件都可以访问到这个$bus属性了。 4.Vue.prototype.$bus = bus; 5.之后就可以使用$bus进行监听和触发了。 6.his.$bus.$emit(event) 7.this.$bus.$on(event,fn) 二、为什么把Vue的实例挂载Vue原型上就可以通讯了呢？
vue里兄弟组件传值
最新发布
12-01
在Vue中，兄弟组件之间的通信可以通过父组件作为中介来实现。具体来说，可以通过在父组件中定义一个数据对象，然后将这个数据对象作为props分别传递给两个兄弟组件，这样两个兄弟组件就可以通过修改这个数据对象来实现通信。 另外，Vue还提供了一个事件总线的机制，可以通过在父组件中创建一个空的Vue实例作为事件总线，然后在兄弟组件中分别通过$emit和$on方法来触发和监听事件，从而实现兄弟组件之间的通信。 下面是一个示例代码，演示了通过props和事件总线两种方式实现兄弟组件之间的通信： ``` // 父组件 <template> <div> <child1 :message="message" @update-message="updateMessage"></child1> <child2 :message="message" @update-message="updateMessage"></child2> </div> </template> <script> import Vue from 'vue' export default { data() { return { message: '' } }, methods: { updateMessage(message) { this.message = message } }, created() { this.bus = new Vue() } } </script> // 子组件1 <template> <div> <input v-model="message"> <button @click="sendMessage">发送消息</button> </div> </template> <script> export default { props: ['message'], methods: { sendMessage() { this.$emit('update-message', this.message) } } } </script> // 子组件2 <template> <div> <p>{{ message }}</p> </div> </template> <script> export default { props: ['message'], created() { this.$parent.bus.$on('update-message', message => { this.message = message }) } } </script> ```

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值