vue开发中,如何实现不同组件之间进行数据通信,下面编程教程网小编给大家简单介绍一下具体实现方法!
具体代码如下:
// main.js
import Vue from 'vue'
export const EventBus = new Vue()
// 组件一.vue
import { EventBus } from '@/main.js'
export default {
mounted() {
EventBus.$emit('dataChanged', this.data)
}
}
// 组件二.vue
import { EventBus } from '@/main.js'
export default {
data() {
return {
data: null
}
},
mounted() {
EventBus.$on('dataChanged', (data) => {
this.data = data
})
}
}
以上是编程学习网小编为您介绍的“vue不同组件之间进行数据通信和方法调用介绍”的全面内容,想了解更多关于 vuejs 内容,请继续关注编程基础学习网。
沃梦达教程
本文标题为:vue不同组件之间进行数据通信和方法调用介绍


猜你喜欢
- bigScreen大屏配置选项无法和画布中心的展示联动解决 2023-12-24
- CSS Transition通过改变Height实现展开收起元素 2024-01-03
- Angular组件库ng-zorro-antd实现radio单选框选择 2023-07-09
- ajax快速解决参数过长无法提交成功的问题 2023-01-26
- JavaScript 浏览器对象模型BOM使用介绍 2023-12-02
- jQuery实现图片与文字描述左右滑动自动切换的方法 2024-02-07
- vue 阻止事件冒泡,捕获方法 2023-10-08
- HTML5 新增标签(一) 2023-10-26
- layui 数据表格自带的导出Excel,身份证等E+/000问题解决 2022-12-14
- 超完整的Vue入门指导 2023-10-08