vue 组件间通信总结

父-子组件通信

1. 通过Props、Attrs，注意：

此处不区分是否加引号，若不bind，皆作字符串处理，否则作为表达式处理

若传入对象，则子组件上的该对象与父组件中的该对象指向同一个地址，如果希望对传入的对象进行修改且不影响父组件，则需要看情况对其进行深、浅拷贝

若传入的属性在父组件中会发生变化，则将其放置在子组件的computed或watch(deep:true)中以检测变化

若要根据该属性去修改以此为基础的其他属性，则使用computed的get/set或watch(deep:true)
ps: 也可以直接在父组件中获取子组件的实例从而再调用子组件的方法、访问子组件的属性等（不常用）

2. 通过$children、$refs...(not suggest)

子-父组件通信

1. 通过给子组件绑定事件，父组件监听子组件事件或$emit 触发的自定义事件，从而获取子组件传入的实参数据

2. 通过$parent、$root...(not suggest)

兄弟组件通信

1. 借助公用的一个vue实例的事件来传递数据（Bus通信），即$on绑定事件，再使用$emit触发该事件

2. 通过路由携带的params传数据

3. 使用Vuex，较复杂，建议庞大的系统再使用

祖先组件与子孙组件通信

1. Bus通信

2. 通过依赖注入，即provide、inject

3. 通过Attrs，由于组件传入不被props接收的属性，可以被子组件通过$attrs访问，故同样可在子组件向孙组件传递数据时使用该方法，从而达到祖孙组件与子孙组件通信，可使用v-bind=’$attrs’将没有被props接收的属性同时传递给子组件

欢迎关注、点赞