说说Vue组件传值有哪些

父传子

1、父传子的第一种方法

父组件通过自定义属性传递，子组件通过 props 接收？

接收到的数据可以改吗？简单数据类型不能改，复杂数据类型引用不能改内容可以改，但是即便如此，也不建议直接改，为什么？

单项数据流思想：如果任何一个地方都可以修改数据，应用复杂出现错误的时候，意味着这个错误可能是任何一个地方导致的，不方便追溯！

怎么处理比较好？数据在哪来的就在哪改！

2、父传子的第二种方式

父亲通过 ref 获取子组件实例，调用此实例的方法的同时并传递参数，儿子方法中接收到参数做对应的修改！

3、父传子的第三种方式

this.$children[0].changeAge(this.age)

4、父传子的第四种方式

// 非 props 属性
this.$attrs

子传父

1、儿子通过 $emit 触发父亲自定义事件的同时并传递数据，父亲监听自定义事件的同时在回调里面进行数据修改的操作

2、this.$parent 拿到父组件实例的同时，调用方法并传参

3、例如父传子，只不过传递的是一个方法，子组件调用这个方法的同时并传递参数

4、通过 this.$listeners 拿到父亲的自定义事件，调用并传参

兄弟

1、状态（数据）提升

A 修改 B，把 B 中的数据提升到公共的父组件里面，A 通过子传父修改父亲的数据，父亲通过父传子传递把数据传递到 B

2、EventBus（事件中心、发布订阅）

Vue3 中 EventBus 被废弃了，你觉得为什么？

太过于灵活，大型项目不太方便追溯问题；由于 EventBus 本身实现起来足够简单，Vue3 处于自身体积更小的考虑，所以被废弃了！

如果我还想再用怎么办？官方推荐了两个包，例如 mitt 或 tiny-emitter 或者自己实现一个。

export default class EventBus {
  constructor() {
    this.subs = {}
  }
  // 订阅 => 订阅的是一个回调函数
  on(eventType, callback) {
    this.subs[eventType]
      ? this.subs[eventType].push(callback)
      : (this.subs[eventType] = [callback])
  }
  // 发布 => 发布事件让其（事件）对应的回到函数执行
  emit(eventType, ...args) {
    this.subs[eventType].forEach((callback) => callback(...args))
  }
}

全局的数据通信和共享（Vuex）

Vuex 主要分两方面：配置项；触发流程；

mutation 里面可以放异步吗？

非严格模式确实是可以放异步，代码也可以正常执行！严格模式下不能这样操作（写异步），会有警告。

不建议放异步代码，目的是为了形成数据快照（拿到当时的那个数据状态），为了配合 DevTools 调试。