组件之间传值六大套路，从此告别数据孤岛！

2023-05-24 10:36:20

组件间传值：Vue中组件交互的基石

在Vue.js应用程序开发中，组件间传值是构建交互式、可维护的前端应用的关键。本文深入探讨了六种最常用的组件间传值方法，旨在帮助开发者掌握这种基本技术，从而提升应用程序的性能和用户体验。

父组件向子组件传值（props）

props是Vue中传递父组件数据给子组件的最直接方式。在父组件中，使用props选项声明子组件接收的数据，在子组件中，通过props选项接收这些数据。

代码示例：

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

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

子组件向父组件传值（emit）

emit是子组件向父组件发送数据的机制。在子组件中，使用$emit方法触发一个自定义事件，并在父组件中使用事件监听器侦听该事件，从而接收子组件传来的数据。

代码示例：

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

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

兄弟组件间传值

兄弟组件间传值可以使用Vuex、EventBus或自定义事件实现。

Vuex

Vuex是一个状态管理工具，允许组件共享数据。在Vuex中，使用state存储数据，使用getters和mutations获取和修改数据。

代码示例：

// store.js
import Vuex from 'vuex'

const store = new Vuex.Store({
  state: {
    count: 0
  },
  getters: {
    getCount: state => state.count
  },
  mutations: {
    increment(state) {
      state.count++
    }
  }
})

EventBus

EventBus是一个事件总线，用于组件间传递事件。

代码示例：

// EventBus.js
import Vue from 'vue'

export default new Vue()

自定义事件

除了Vuex和EventBus之外，可以使用自定义事件实现兄弟组件间传值。

代码示例：

// ComponentA.vue
<template>
  <button @click="handleClick">Send message</button>
</template>

// ComponentB.vue
<template>
  <p>{{ message }}</p>
</template>