Vue中如何使用$props、$attrs和$listeners实现组件间通信？

本文共计1084个文字，预计阅读时间需要5分钟。

目录背景

一、文档描述

二、具体应用

三、总结

背景现在我们讨论一种情况，父子组件如何通信，以及我们有哪些解决方案？

具体应用我们使用VueX进行数据管理，但项目中有‘+’这样的需求。

总结

目录

• 背景
• 一、文档描述
• 二、具体使用
• 三、总结

背景

现在我们来讨论一种情况，父组件与孙子组件怎么通信，我们有多少种解决方案？

• 我们使用VueX来进行数据管理，但是如果项目中多个组件共享状态比较少，项目比较小，并且全局状态比较少,那使用VueX来实现该功能，并没有发挥出VueX的威力。
• 使用B来做中转站，当A组件需要把信息传给C组件时，B接受A组件的信息，然后利用属性传给C组件， 这是一种解决方案，但是如果嵌套的组件过多，会导致代码繁琐，代码维护比较困难;如果C中状态的改变需要传递给A, 使用事件系统一级级往上传递 。
• 自定义一个Vue 中央数据总线，这个情况适合碰到组件跨级传递消息，但是缺点是 碰到多人合作时，代码的维护性较低，代码可读性低

一、文档描述

（1）$props：当前组件接收到的 props 对象。Vue 实例代理了对其 props 对象属性的访问。