vue 组件通信传值

1. 父组件向子组件传值

父组件通过 prop 给子组件下发数据，子组件通过$emit触发事件给父组件发送消息，即 prop 向下传递，事件向上传递。

• 新建父组件文件

• 新建子组件文件

image.png

另一种(在封装组件里传值)父组件向子组件传值

局部封装

image.png

image.png

‘a’是字符串数组

2. 子组件向父组件传值

vue是禁止子组件直接向父组件传值的，所以只能通过$emit触发事件来达到目的。

• 新建子组件文件

• 新建父组件文件

image.png

3.非父子组件传值(兄弟组件传值)

需要新建一个公共的公共实例文件bus.js，作为中间仓库来传值

• 1.在src目录下新建一个bus.js文件

import Vue from 'vue'
export default new Vue()

• 2.新建组件A

• 新建组件B

4. 袓孙隔代传值

当一个模板里嵌套了很多层时，如：组先、儿子、孙子、曾孙等，你要从最里层曾孙组件里去访问最外层袓先的数据，如果你要一层一层的去传值的话，那这会非常麻烦，并且数据容易出错。这时就需要用到provide 和inject方法，它们俩需要一起使用，以允许一个祖先组件向其所有子孙后代注入一个依赖，不论组件层次有多深，并在起上下游关系成立的时间里始终生效。

不推荐直接用于应用程序代码中。一般使用的场景是自定义组件库的时候，底层组件之间需要通信的时候使用。

• provide： 一个对象或返回一个对象的函数

• inject：一个字符串数组，或 一个对象，对象的 key 是本地的绑定名

• 1. 新建袓先级组件

• 2. 新建儿子级组件

• 3. 新建孙子级组件

注意：这里不论子组件嵌套有多深, 只要调用了 inject 那么就可以注入 provide 中的数据，而不局限于只能从当前父组件的props属性中回去数据

image.png

总结：
在简单的功能模块，可以通过传递对象实现跨级组件通信，复杂的功能模块不建议使用，因为传递的数据，如果其他的儿子级组件，其他儿子级组件的孙子级组件也在使用的话，会造成数据的混乱，甚至无法理解数据是在哪里变化的，排查故障艰难。
跨级组件通信可以定义一个中央事件总线（eventBus），但是更复杂的系统，还是建议使用vuex。

参考以下资料：
https://blog.csdn.net/weihaifeng163/article/details/88338822
https://www.cnblogs.com/pangchunlei/p/12112318.html