首先，非父组件之间的传值有两种方法，一种是事件车通信，另一种为vuex(全局状态管理，是管理整个项目的)。这篇介绍vue事件车通信的使用。
事件车通信
emit 触发 on 监听变化 处理事件
举例说明：
1.创建一个通信桥梁js文件
//引入事件车通信
const event=require("events");//事件模块
const eventEmit=new event.EventEmitter();//EventEmitter事件监听器
module.exports=eventEmit;
2.在main.js里全局挂载
import {
createApp } from 'vue'
import App from './App.vue'
import events from './events/event'
const app=createApp(App);
//app.config.globalProperties 3.0提供的全局属性和方法挂载区域 注册全局属性和方法
app.config.globalProperties.$eventEmitter=events;
app.mount('#app')
3.建立一个主页面App.vue和两个子组件
把两个子组件header.vue和Home.vue挂到上面
<template>
<div id="app">
<v-header></v-header>
<v-home></v-home>
</div>
</template>
<script>
import {
defineAsyncComponent} from 'vue';
export default {
name:"app",
components:{
'v-home':defineAsyncComponent(() => import("./components/Home.vue")),
'v-header':defineAsyncComponent(() => import("./components/header.vue")),
},
}
</script>
<style>
</style>
子组件：header.vue
<template>
<div id="headd">
<button @click="send">事件车 非父组件之间的传值</button>
<h1>{
{
msg}}</h1>
</div>
</template>
<script>
export default {
name :'headd',
data(){
return{
msg:'header的值'
}
},
methods:{
send(){
this.$eventEmitter.emit("senddata",this.msg);
}
}
}
</script>
<style>
#headd{
height:100px;
background-color: aqua;
}
</style>
子组件：Home.vue
<template>
<div id="home">
<h1>{
{
msg}}</h1>
</div>
</template>
<script>
export default {
name:'home',
data(){
return{
msg:'home的值'
}
},
mounted(){
this.$eventEmitter.on("senddata",(args)=>{
this.msg=args;
console.log(this.msg);
})
}
}
</script>
<style>
#home{
height: 80px;
background-color: blanchedalmond;
}
</style>
解释 :这两个子组件之间的关系为兄弟组件，在header里点击按钮触发send方法，然后触发senddata，在Home组件里监听到senddata，将header里的信息传送到Home组件里，将Home里面的msg信息变为header里的msg。
结果为：先前：
点击按钮之后：
