Vue3组件之间传递值的五大方式（附实例）

2024-01-26 12:59:00

Vue3 组件之间传递值的艺术：五大方式深入浅出

在现代前端开发中，组件化 已成为构建复杂、可维护应用程序的基石。组件化允许我们将应用程序分解为可重用的模块，从而提高开发效率和代码可读性。然而，组件之间的数据传递也是组件化开发的一个关键方面，它对应用程序的整体功能和用户体验至关重要。

在 Vue3 中，组件之间传递值的机制得到了进一步的增强和优化。本文将深入探讨 Vue3 组件之间传递值的五大方式 ，并提供详细的代码示例，帮助你轻松掌握这一重要概念。

1. props：父组件传值给子组件

props 是 Vue3 中传递数据的 最基本方式 。父组件通过 props 属性将数据传递给子组件，子组件通过 props 接收并使用这些数据。

<!-- 父组件 -->
<template>
  <ChildComponent :message="message"></ChildComponent>
</template>

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

<!-- 子组件 -->
<template>
  <div>{{ message }}</div>
</template>

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

在这个例子中，父组件通过 message 属性将 "Hello Vue3!" 数据传递给子组件，子组件通过 message 属性接收并显示该数据。

2. emit：子组件向父组件发送事件

emit 是 Vue3 中组件之间传递数据的 另一种方式 。子组件通过 emit 方法向父组件发送事件，父组件通过侦听该事件来接收数据。

<!-- 父组件 -->
<template>
  <ChildComponent @update-message="updateMessage"></ChildComponent>
</template>

<script>
export default {
  methods: {
    updateMessage(newMessage) {
      this.message = newMessage
    }
  }
}
</script>

<!-- 子组件 -->
<template>
  <button @click="updateMessage">更新父组件数据</button>
</template>

<script>
export default {
  methods: {
    updateMessage() {
      this.$emit('update-message', 'Hello Vue3!')
    }
  }
}
</script>

在这个例子中，子组件通过 updateMessage 方法向父组件发送 "Hello Vue3!" 数据，父组件通过 updateMessage 方法侦听该事件并更新 message 数据。

3. eventBus：全局事件总线

eventBus 是 Vue3 中组件之间传递数据的 第三种方式 。eventBus 是一個 全局事件總線 ，任何組件都可以向 eventBus 發送事件，任何組件都可以偵聽 eventBus 的事件。

<!-- 父组件 -->
<template>
  <ChildComponent @update-message="updateMessage"></ChildComponent>
</template>

<script>
import EventBus from './event-bus'

export default {
  methods: {
    updateMessage(newMessage) {
      this.message = newMessage
    }
  },
  mounted() {
    EventBus.$on('update-message', this.updateMessage)
  },
  beforeDestroy() {
    EventBus.$off('update-message', this.updateMessage)
  }
}
</script>

<!-- 子组件 -->
<template>
  <button @click="updateMessage">更新父组件数据</button>
</template>

<script>
import EventBus from './event-bus'

export default {
  methods: {
    updateMessage() {
      EventBus.$emit('update-message', 'Hello Vue3!')
    }
  }
}
</script>

<!-- event-bus.js -->
export default {
  install(Vue) {
    Vue.prototype.$eventBus = new Vue()
  }
}

在这个例子中，子组件通过 updateMessage 方法向 eventBus 发送 "Hello Vue3!" 数据，父组件通过 eventBus 监听该事件并更新 message 数据。

4. provide/inject：依赖注入

provide/inject 是 Vue3 中组件之间传递数据的 第四种方式 。provide/inject 允许父组件向其子组件提供数据，子组件可以通过 inject 方法注入这些数据。

<!-- 父组件 -->
<template>
  <ChildComponent></ChildComponent>
</template>

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

<!-- 子组件 -->
<template>
  <div>{{ message }}</div>
</template>

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

在这个例子中，父组件通过 provide 方法提供 message 数据，子组件通过 inject 方法注入 message 数据并显示该数据。

5. vuex：集中式状态管理

vuex 是 Vue3 中组件之间传递数据的 第五种方式 。vuex 是一个状态管理库，它允许你将组件的状态集中管理起来，并在组件之间共享这些状态。

<!-- 父组件 -->
<template>
  <ChildComponent></ChildComponent>
</template>

<script>
import { mapState } from 'vuex'

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

<!-- 子组件 -->
<template>
  <div>{{ message }}</div>
</template>

<script>
import { mapMutations } from 'vuex'

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