Vue组件之间的通信

发表于

父子组件：

  • 父对子：prop传递数据
  • 子对父：$emit触发自定义事件

如果父组件传递给子组件的是一个引用类型的数据，在子组件内部对数据源进行修改的时候，父组件会同步修改。
为了避免同步修改，需要对其进行深复制

1
2
3
4
5
6
props:['obj'],
data(){
   return {
     myObj: JSON.parse(JSON.stringify(this.obj))
   }
}

爷孙组件：

使用两次 v-on 通过爷爷爸爸通信，爸爸儿子通信实现爷孙通信

任意组件：

  • 使用 eventBus = new Vue() 来通信，eventBus.$on 和 eventBus.$emit 是主要API
  • 使用 Vuex 通信