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刷新页面方法大全 2024-02-08
- 学习从实践开始之jQuery插件开发 对话框插件开发 2024-04-01
- JS实现登录页面记住密码和enter键登录方法推荐 2023-12-01
- JavaScript求解最长回文子串的方法分享 2022-10-21
- 微信小程序使用navigator实现页面跳转功能 2024-01-06
- 解析div与span区别与用法 2024-04-03
- 使用CSS3中的calc()属性来以算式表达尺寸数值 2023-12-22
- 使用CSS画爱心的过程详解 2024-04-08
- 基于HTML5的可预览多图片Ajax上传 2023-01-20
- echarts地图设置背景图片及海岸线实例代码 2024-01-06