个人笔记-----非父子组件的通信【如有不对，欢迎指正】

最新推荐文章于 2024-09-03 15:19:25 发布

原创最新推荐文章于 2024-09-03 15:19:25 发布 · 143 阅读

0 ·

CC 4.0 BY-SA版权

vue 专栏收录该内容

29 篇文章

订阅专栏

本文介绍了一种Vue组件间通信的方法，通过创建一个公共实例文件VueEvent.js作为中间仓库，实现A组件向B组件发送数据。具体步骤包括实例化Vue、使用$emit()发送数据和$on()接收数据。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1，创建一个公共的实例文件（VueEvent.js），作为中间仓库来传递数值，
2，想从 B 组件获取 A 组件数据，分别在A和B组件中引入公共实例文件VueEvent.js ，然后在A组件中用$emit()将数据发送出去，然后在 B 组件中用$on 方法来接收，
3，在公共文件中先引入 Vue import Vue from 'vue'
对 Vue 进行实例化叫 VueEvent var VueEvent = new Vue()
将实例化暴露出去 export default VueEvent
这样空文件就完成了他的使命。
4，然后在A和B组件的根组件文件中引入A和B两个组件，
5，分别在A和B组件中引入公共是实例文件VueEvent.js import VueEvent from '../VueEvent.js'
6，在A组件中添加事件，发送给B事件
发送时间用$emit()，有两个参数，第一个是设置数据的名字，然后再B组件中用$on()接收。
$emit('数据名称',数据) 。
$on('数据名称',function(data){})

		methods: {
            emitToB(){
                VueEvent.$emit('tohome',this.aaa)
            }
        },

7，在B组件中接收事件

	    mounted(){
	        VueEvent.$on('tohome',function(data){
	            this.bbb = data;
	            //console.log(this.bbb)
	        })
	    }

VueEvevt.js

import Vue from 'vue';
var VueEvent = new Vue();




export default VueEvent;