vue组件之间通信

大白鑫

于 2021-07-13 17:58:14 发布

阅读量85

点赞数 1

文章标签： vue 值传递

本文链接：https://blog.youkuaiyun.com/happygirl0917/article/details/118566661

版权

本文介绍了在Vue中优化组件通信的三种方法：Event Bus、$emit和ref。通过创建独立的Event Bus实例，实现组件间的松耦合通信；使用$emit和v-on监听事件，实现子组件调用父组件方法；以及利用ref属性直接引用子组件，提高代码可读性。总结了这些方法在实际项目中的应用和注意事项。

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

今天做项目时，用了this.$parent.$parent.$parent.去调用组件，结果被提醒了一下。丢死人了。

现在，做个总结吧！

前提 B组件去调用A组件的方法

1.使用bus（都很适合）

在utils文件夹中创建bus.js

import Vue from 'vue'
const Bus = new Vue();
export default Bus;

调用bus.js @/utils/bus.js

在A组件和B组件中去使用。先导入

import Bus from "@/utils/bus.js"


A组件（被动方）
Bus.$on('name',e={})

b组件（主动方）
Bus.$emit('name','传递的值')

2.$emit(子组件调用父组件) 子组件里的name值是父组件函数的名字

父组件：

name(e){

}

子组件：

set(e){

this.$emit('name',e)

}

3.ref

第一种情况：

this.$refs.name 获取的是div

this.refs.name 获取的是子组件