Vue3 组件通信指南：轻松搞定父子、兄弟、爷孙等场景

2023-01-07 02:19:43

Vue3 组件通信指南：解锁数据和事件传输的多种方式

在 Vue3 中，组件通信是构建复杂应用程序的关键。它使我们能够在组件之间传递数据和事件，从而实现组件之间的互动和数据共享。本文将深入探讨 Vue3 中的组件通信机制，帮助你掌握各种场景下的数据和事件传输方式。

父子组件通信：从父组件到子组件的单向数据流

父子组件通信是 Vue3 中最常见的通信方式。父组件通过 props 属性向子组件传递数据，子组件通过 props 接收数据。props 是只读的，只能从父组件向子组件传递数据，不能从子组件向父组件传递数据。

// 父组件
<template>
  <child-component :message="message" />
</template>

<script>
export default {
  data() {
    return {
      message: 'Hello Vue3!'
    }
  }
}
</script>

// 子组件
<template>
  <p>{{ message }}</p>
</template>

<script>
export default {
  props: ['message']
}
</script>

子组件向父组件通信：使用事件触发反向数据流

子组件向父组件通信可以通过 emit 事件的方式。子组件通过 emit 方法触发事件，父组件通过 v-on 监听事件，并执行相应的处理函数。

// 子组件
<template>
  <button @click="handleClick">Send Message</button>
</template>

<script>
export default {
  methods: {
    handleClick() {
      this.$emit('message', 'Hello from child component!')
    }
  }
}
</script>

// 父组件
<template>
  <child-component @message="handleMessage" />
</template>

<script>
export default {
  methods: {
    handleMessage(message) {
      console.log(message) // Hello from child component!
    }
  }
}
</script>

兄弟组件通信：利用事件总线进行横向数据交换

兄弟组件通信可以通过 eventBus 的方式。eventBus 是一个全局的事件总线，组件可以通过它来发布和订阅事件。

// 兄弟组件 A
<template>
  <button @click="handleClick">Send Message</button>
</template>

<script>
import eventBus from './eventBus'

export default {
  methods: {
    handleClick() {
      eventBus.$emit('message', 'Hello from component A!')
    }
  }
}
</script>

// 兄弟组件 B
<template>
  <p>{{ message }}</p>
</template>

<script>
import eventBus from './eventBus'

export default {
  data() {
    return {
      message: ''
    }
  },
  created() {
    eventBus.$on('message', (message) => {
      this.message = message
    })
  }
}
</script>

// eventBus.js
export default {
  $on(eventName, callback) {
    this.callbacks[eventName] = this.callbacks[eventName] || []
    this.callbacks[eventName].push(callback)
  },
  $emit(eventName, data) {
    if (this.callbacks[eventName]) {
      this.callbacks[eventName].forEach((callback) => {
        callback(data)
      })
    }
  }
}

爷孙组件通信：通过 provide/inject 实现跨层数据共享

爷孙组件通信可以通过 provide/inject 的方式。爷组件可以通过 provide 方法提供数据或方法，孙组件可以通过 inject 方法注入这些数据或方法。

// 爷组件
<template>
  <child-component />
</template>

<script>
export default {
  provide() {
    return {
      message: 'Hello Vue3!'
    }
  }
}
</script>

// 子组件
<template>
  <grandchild-component />
</template>

<script>
export default {
  provide() {
    return {
      message: 'Hello from child component!'
    }
  }
}
</script>

// 孙组件
<template>
  <p>{{ message }}</p>
</template>

<script>
export default {
  inject: ['message'],
  created() {
    console.log(this.message) // Hello from child component!
  }
}
</script>

任意组件通信：使用 Vuex/Pinia 实现全局数据管理

任意组件通信可以通过 Vuex 或 Pinia 的方式。Vuex 和 Pinia 是状态管理库，它们可以帮助我们在 Vue 组件之间共享数据和状态。

// Vuex
import Vuex from 'vuex'

const store = new Vuex.Store({
  state: {
    message: 'Hello Vue3!'
  },
  mutations: {
    setMessage(state, message) {
      state.message = message
    }
  },
  actions: {
    sendMessage(context, message) {
      context.commit('setMessage', message)
    }
  }
})

// 组件 A
<template>
  <button @click="sendMessage">Send Message</button>
</template>

<script>
import { mapActions } from 'vuex'

export default {
  methods: {
    ...mapActions(['sendMessage'])
  }
}
</script>

// 组件 B
<template>
  <p>{{ message }}</p>
</template>

<script>
import { mapState } from 'vuex'

export default {
  computed: {
    ...mapState(['message'])
  }
}
</script>