Skip to main content

组件通信

1. props/$emit（父子组件通信）​

  • 父组件 A 通过 props 的方式向子组件 B 传递
  • B to A 通过在 B 组件中 $emit，A 组件中 v-on 的方式实现

2. $emit/$on（父子、兄弟、跨级组件通信）​

  • 创建一个空的Vue实例（非必须）：const Bus = new Vue()
  • 传值组件：Bus.$emit([eventName],[data])
  • 接收组件：Bus.$on([eventName],data => {...})

3. Vuex​

  • 实现了一个单向数据流，State 存放数据
  • 组件要更改 State 的数据必须通过 Mutation 进行
  • 异步操作需要通过 Action 进行，而 Action 只能通过 Mutation 修改 State 的数据
  • 一般将数据拷贝一份到 localStorage，实现数据持久化

4. $attrs/$listeners（跨级数据传递）​

  • $attrs 和 $listeners 是两个对象
  • $attrs 存放的是父组件中绑定的非props属性
  • $listeners 存放的是父组件中绑定的非原生事件

5. provide/inject（跨级组件通信，主要用于子组件获取上级组件的状态）​

  • 上级组件通过 provide 提供变量
  • 子组件通过 inject 注入变量

6. ref/$refs​

  • 直接得到组件实例，使用const com = this.$refs.xxx
  • 可以直接调用组件的方法或访问数据