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不同组件之间进行数据通信和方法调用介绍
基础教程推荐
猜你喜欢
- 细说JS数组遍历的一些细节及实现 2023-07-10
- CSS实现 Google Material Design 文本输入框风格(推荐) 2024-01-08
- 关于CSS absolute与relative不得不说的话 2023-12-08
- vue3.0之Router的使用你了解吗 2024-03-08
- Vue-Router基础学习笔记(小结) 2024-03-08
- 使用CSS媒体查询(Media Queries)和JavaScript判断浏览器设备类型的方法 2024-01-16
- react中ref获取dom或者组件的实现方法 2023-07-09
- c# – 使用HTML5捕获签名并将其作为映像保存到数据库 2023-10-25
- HTML自定义弹出框 2023-10-27
- CSS3 滤镜 webkit-filter详细介绍及使用方法 2024-02-07
