昆明网站建设询力鼎科技,免费家装设计网,WordPress制作公告,商场设计平面布置图说明#xff1a;为了解决组件间的通信#xff0c;也就是组件与组件间的数据传递(它们之间毫无关系)#xff1b;
这里以组件1传递数据到组件2为例
1.首先新建一个Bus.js文件
import Vue from vue
const Bus new Vue()
export default Bus
2.在组件1中引用 传递数据
imp…说明为了解决组件间的通信也就是组件与组件间的数据传递(它们之间毫无关系)
这里以组件1传递数据到组件2为例
1.首先新建一个Bus.js文件
import Vue from vue
const Bus new Vue()
export default Bus
2.在组件1中引用 传递数据
import Bus from ./Busexport default {data() {return {.........}},methods: {....Bus.$emit(log, 120)},}
3.在组件2中引用 接收数据
import Bus from ./Busexport default {data() {return {.........}},mounted () {Bus.$on(log, content { console.log(content)}); }
}
4.注意事项
1在传递数据的组件中使用Bus.$emit(),在接收数据的组件中使用Bus.$on()
2Bus.$emit()的第一个参数要与Bus.$on()的第一个参数一模一样可以随意命名
3Bus.$emit()的第二个参数是要传递的数据如果要传递多个数据就以逗号隔开相当于函数的实参一样
4Bus.$on()的第二个参数是箭头函数或者定义的方法如果要接收多个数据就以逗号隔开相当于函数的形参
5一定要在接收数据的组件页面关闭页面时销毁Bus卸载生命周期里进行操作具体如下
beforeDestroy () {Bus.$off(updateData, this.getData);};//this.getData是自己定义的方法用来接收数据的
