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不同组件之间进行数据通信和方法调用介绍


基础教程推荐
猜你喜欢
- JavaScript实现简单购物小表格 2024-03-08
- css3实现动画的三种方式 2023-12-27
- 通过position定位实现div底端对齐 2023-12-12
- 教你javascript如何获取指针的位置 2023-12-20
- JSscript标签有哪些属性 2023-08-08
- Ajax实现图片上传并预览功能 2023-02-14
- css和css3弹性盒模型实现元素宽度(高度)自适应 2023-12-27
- html和css有哪些禁止元素拖拽的代码 2024-12-14
- vue.js实现标签页切换效果 2024-02-04
- vue+springboot图片上传和显示的示例代码 2023-12-19