vue不同组件之间进行数据通信和方法调用介绍

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

基础教程推荐