2025年01月07日 建站教程
在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>
本文链接：http://so.lmcjl.com/news/20898/