vue如何实现非父子组件通信 - web建站教程手机端

在vue开发中存在2种通信方式：一种是父子组件通信；另一种是非父子组件通信。下面web建站小编给大家简单介绍一下vue非父子组件通信！

eventMedth.js文件

import Vue from 'vue'
export const eventMedth = new Vue()

需要通信的组件

<script>
  import { eventMedth } from '@/eventMedth.js'
 
  export default {
    methods: {
      sendMessage () {
        eventMedth.$emit('sendMsg', 'Hello Vue!')
      }
    }
  }
</script>

接收事件

<template>
  <div>
    <h1>{{ message }}</h1>
  </div>
</template>
 
<script>
  import { eventMedth } from '@/eventMedth.js'
 
  export default {
    data () {
      return {
        message: ''
      }
    },
    created () {
      eventMedth.$on('sendMsg', (msg) => {
        this.message = msg
      })
    }
  }
</script>

如何在Vue.js中使用父子组件通信？

Vue开发中如何实现跨组件通信

vue如何实现父子组件通信

标签： vue组件通信, 非父子组件通信

上面是“vue如何实现非父子组件通信”的全面内容，想了解更多关于 vuejs 内容，请继续关注web建站教程。

当前网址：https://m.ipkd.cn/webs_4692.html

声明：本站提供的所有资源部分来自互联网，如果有侵犯您的版权或其他权益，请发送到邮箱：admin@ipkd.cn，我们会在看到邮件的第一时间内为您处理！