vue兄弟组件之间的传值

1、建立一个单独的文件bus.js

import Vue from 'vue'
export default new Vue()

2、传递事件

// 传递事件
import Bus from '你的路径/bus.js'
// 在methods中：
bus() {Bus.$emit('eventName', param)
}

3、接收事件

// 接收事件
import Bus from '你的路径/bus.js'
// 在mounted中：
Bus.$on('eventName', (e) => {console.log('穿过来的数据' + e)
})

vue、bus 使用遇到的坑，组件之间无法传值；vue、bus 第一次获取不到值，后面数据叠加

问题定位：

出现无法传值的情况，检查传值过程中组件是否还没有渲染；可能出现的情况是：组件被if，在你使用 Bus.$emit() 时组件还没有渲染出来；
出现点击重复执行情况，检查bus是否使用后销毁;
使用Bus.$on后，需要生命周期beforeDestroy中销毁：

beforeDestroy() {Bus.$off("onSearchwordKey");
}

如果对您有所帮助，点个赞收个藏吧~Thanks♪(･ω･)ﾉ (✪ω✪) ᕦ(･ㅂ･)ᕤ！！！

vue兄弟组件之间的传值，bus运用，beforeDestroy销毁，Bus.$off相关推荐

vue 兄弟组件之间的传值
1. 定义一个公共的bus.js //bus.js import Vue from 'vue' export default new Vue() 2. 在子组件A里用$emit发射数据 <scr ...
VUE父子组件之间的传值，以及兄弟组件之间的传值；
一.Vue父子组件之间传值 vue使用中,经常会用到组件,好处是: 1.如果有一个功能很多地方都会用到,写成一个组件就不用重复写这个功能了: 2.页面内容会简洁一些:方便管控: 子组件的传值是通过p ...
vue之组件之间的传值
1.父组件向子组件传值 //parent.vue <template> <div> <child :send-msg-to-child="toChildMsg& ...
react兄弟组件之间的传值
react兄弟组件之间的传值一.通过redux 1.在redux中找到对应的文件设置 a. b. c. d. 2.页面存储数据到redux中 3.页面提取redux里面的数据二.通过hook中的c ...
Vue 兄弟组件之间传值 Bus方法
1.在vue项目中新建一个js文件(文件名:bus.js) import Vue from 'vue'export default new Vue(); 2.在需要传值的页面引用并开始传参 <s ...
Vue父子组件之间的传值
1.vue是如何进行父子组件之间的传值的 a.父子组件之间通过props b.子父组件之间通过$emit 2.简单demo描述父组件包含一个点击按钮,用于改变子组件的显示与隐藏: 子组件只有一 ...
vue父子组件之间的传值，及互相调用父子组件之间的方法
场景:父子组件之间的传值方法,以及调用他们的内部的方法 *** 父组件给子组件传值是通过属性绑定的方法 *** 子组件给父组件传值是通过绑定对应的方法将自身的值传递给父 ...
vue兄弟组件之间的通信的使用
一般是页面里面引入两个组件在components 里面注册 components:{//引入的组件名 } 两个组件之间要传值的话要共同引入一下js的一个文件 import eventBus from ...
兄弟组件之间进行传值
首先创建一个中转站,是个js文件 import Vue from 'vue' var hub=new Vue(); //中转站 export default hub; 然后在第一个兄弟组件中 1.首先 ...

vue兄弟组件之间的传值，bus运用，beforeDestroy销毁，Bus.$off

vue兄弟组件之间的传值

vue、bus 使用遇到的坑，组件之间无法传值；vue、bus 第一次获取不到值，后面数据叠加

vue兄弟组件之间的传值，bus运用，beforeDestroy销毁，Bus.$off相关推荐

最新文章

热门文章