"内心极度不渴望的东西，它不可能靠近你，心不唤物，物不至，若没有强烈的渴望，就看不到办法，成功就不会向我们靠近"
--出自《稻盛和夫给年轻人的忠告》
01
前言
Vue中的组件通讯可以是说是工作常用，面试必问的知识点了，其中包括了父子组件之间的通讯和兄弟组件之间的通讯，有的时候还会有和根组件之间的通讯。无论哪个模式的通讯，都离不开以下几点：
通过props和emit
通过provide和inject
通过EventBus
通过Vuex或者Pinia状态管理
通过refs
今天我们就来细说一下这几点通讯方式，让大家真正掌握在Vue中组件的通讯方式，方便大家在工作或者面试中所向无敌图片图片
02
props和emit
通过props和emit进行通讯是父子组件中最常用的通讯方式了，方便，简单，好理解。但是要注意一个地方就是：单向数据流原则不能破坏。
props和emit可以进行单独的使用，而不是一定要组件在一起使用，父组件可以通过props给子组件进行传递数据，但是子组件不是更改数把，只能进行读取，这就是单向数据流的概念。简单看一下例子，很简单不多说。
props一般用于父组件给子组件传递数据

// 子组件的定义
<template>
<div>
<button @click="changName">改名字</button>
<div>
</template>
<script>
export default {
  // 接收传递数据
  props: {
    name: {
      type: Array,
      default: () => ({})
    }
  },
  mounted() {
    console.log(this.name) // parent name
  },
  methods: {
    changeName() {
      this.$emit('changeName', 'child changed name')
    }
  }
}
</script>
// 父组件的定义
<template>
<div>
<Child :name="name" @changeName="onChangeName"></Child>
<div>
</template>
<script>
export default {
  data() {
    return {
      name: 'parent name'
    }
  },
  methods: {
    onChangeName(newName) {
      this.name = newName
    }
  }
}
</script>

app.component('todo-list', {
  provide() {
    return {
      todoLength: Vue.computed(() => this.todos.length)
    }
  }
})
app.component('todo-list-statistics', {
  inject: ['todoLength'],
  created() {
    console.log(`Injected property: ${this.todoLength.value}`) // > 注入的 property: 5
  }
})

$on: (...args) => emitter.on(...args),
$once: (...args) => emitter.once(...args),
$off: (...args) => emitter.off(...args),
$emit: (...args) => emitter.emit(...args),