除了递归组件，Vue还有哪些常用的组件通信方式？

// 父组件
<ChildComponent :message="parentMsg" @handleChange="handleChange" />

// 子组件
export default {
  props: ['message'],
  methods: {
    sendData() {
      this.$emit('handleChange', '来自子组件的数据')
    }
  }
}

// 子组件中访问父组件
this.$parent.parentMethod()

// 父组件中访问子组件
this.$children[0].childMethod()

// 父组件
<ChildComponent ref="child" />

// 父组件中调用
this.$refs.child.childMethod()

// 祖先组件
export default {
  provide() {
    return {
      theme: 'dark',
      changeTheme: this.changeTheme
    }
  },
  methods: {
    changeTheme() { ... }
  }
}

// 后代组件
export default {
  inject: ['theme', 'changeTheme'],
  mounted() {
    console.log(this.theme) // 'dark'
  }
}

// main.js 中创建
Vue.prototype.$bus = new Vue()

// 组件A发送事件
this.$bus.$emit('eventName', data)

// 组件B接收事件
mounted() {
  this.$bus.$on('eventName', (data) => {
    console.log(data)
  })
}
// 组件B销毁时移除监听
beforeDestroy() {
  this.$bus.$off('eventName')
}

// store.js
import { defineStore } from 'pinia'
export const useStore = defineStore('main', {
  state: () => ({ count: 0 }),
  actions: {
    increment() {
      this.count++
    }
  }
})

// 组件中使用
import { useStore } from './store'
const store = useStore()
console.log(store.count) // 访问状态
store.increment() // 调用方法

// 中间组件
<ChildComponent v-bind="$attrs" v-on="$listeners" />