VUE中组件之间的通信方式

目录

一、父子组件之间的通信方式

1.props+$emit()

3.$parent+$children

4.provide+inject

5.$attrs+$listeners

6.ref+$refs

二、兄弟组件之间的通信方式

1.子传值到父，再由父传值到子

2.事件总线

---

（备注视频代码学习来自：重要！父子组件通信的方式有哪几种？【Vue面试题】_哔哩哔哩_bilibili）

一、父子组件之间的通信方式

1.props+$emit()

1.父组件通过props向子组件传递数据（在子组件中用props接收）

2.子组件通过$emit()向父组件传递数据或事件，如在子组件中自定义事件changeMessage,携带信息'bye’, 然后在父组件中通过v-on监听这个事件

parent.vue

child.vue

运行后如下，点击按钮，父亲孩子下面的hello都会变成bye。

                                            

2.通过回调函数（callback）

parent.vue（将changeMsgFn作为另外一个props传给子组件）

 child.vue

3.$parent+$children

1.父组件通过$children访问子组件

2.子组件通过$parent访问父组件

parent.vue

 child.vue

                  (点击按钮后子组件中的数据10变为50）

4.provide+inject

parent.vue

 child.vue

                                                             

5.$attrs+$listeners

parent.vue

child.vue

GrandParent.vue

                                                  

6.ref+$refs

parent.vue

  child.vue

                                                

每种通信方式还需要继续学习，各自优缺点局限性等....

二、兄弟组件之间的通信方式

1.子传值到父，再由父传值到子

child11.vue

 child22.vue

                                                           

2.事件总线

new一个新的vue实例并导出，子组件都引入，子组件1$emit出去，子组件2$on监听

main.js

import Vue from 'vue'
import App from './App.vue'

export const eventBus = new Vue(); //创建实例,并导出

Vue.config.productionTip = false

new Vue({
    render: h => h(App),
}).$mount('#app')

parent.vue

child1.vue

child2.vue

点击按钮，两个子组件中的内容改变，父组件中不变