不同类型的 Vue 组件通信方式

2023-10-29 16:26:27

在 Vue.js 中，组件通信是一个非常重要的概念，它允许组件之间传递数据和事件，从而实现组件之间的协作和交互。Vue.js 提供了多种组件通信方式，每种方式都有其各自的优缺点，开发者可以根据具体场景选择最合适的通信方式。

父子组件通信

父子组件通信是最常见的组件通信方式，是指父组件和子组件之间的数据和事件传递。在 Vue.js 中，父子组件通信可以通过 props 和 scoped slot 来实现。

props

props 是父子组件通信最常用的方式之一，它允许父组件向子组件传递数据。父组件通过在子组件的 template 中声明 props 来定义需要传递的数据，然后在子组件的 methods 中使用 props 来访问这些数据。

例如，父组件可以向子组件传递一个名为 "message" 的 prop，子组件可以在其 template 中使用 {{ message }} 来访问这个 prop 的值。

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

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


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

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

scoped slot

scoped slot 是父子组件通信的另一种方式，它允许子组件在父组件中使用父组件的数据和方法。与 props 不同，scoped slot 是由子组件定义的，父组件通过在子组件的 template 中使用 scoped slot 来访问子组件的数据和方法。

例如，子组件可以定义一个名为 "message" 的 scoped slot，父组件可以在其 template 中使用 <template #message>...</template> 来访问这个 scoped slot。

<!-- 父组件 -->
<template>
  <child-component>
    <template #message>
      <p>{{ message }}</p>
    </template>
  </child-component>
</template>

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


<!-- 子组件 -->
<template>
  <slot name="message"></slot>
</template>

<script>
export default {
}
</script>

兄弟组件通信

兄弟组件通信是指两个没有父子关系的组件之间的通信。在 Vue.js 中，兄弟组件通信可以通过 EventBus、Vuex 和 props 来实现。

EventBus

EventBus 是一个全局事件总线，它允许组件之间发送和接收事件。组件可以通过调用 EventBus 的 emit 方法来发送事件，其他组件可以通过调用 EventBus 的 on 方法来监听事件。

例如，组件 A 可以发送一个名为 "message" 的事件，组件 B 可以监听这个事件并在收到事件时执行某些操作。

// 组件 A
export default {
  methods: {
    sendMessage() {
      this.$emit('message', 'Hello World')
    }
  }
}


// 组件 B
export default {
  mounted() {
    this.$on('message', (message) => {
      console.log(message) // Hello World
    })
  }
}

Vuex

Vuex 是一个状态管理库，它允许组件共享状态。组件可以通过调用 Vuex 的 mapState 和 mapActions 方法来访问和修改 Vuex 的状态。

例如，组件 A 可以将 "message" 状态映射到其 data 中，组件 B 可以将 "sendMessage" 方法映射到其 methods 中。这样，组件 A 和组件 B 都可以访问和修改 "message" 状态。

// 组件 A
export default {
  computed: {
    ...mapState(['message'])
  }
}


// 组件 B
export default {
  methods: {
    ...mapActions(['sendMessage'])
  }
}

props

props 也可以用于兄弟组件通信，但需要在两个组件之间建立父子关系。例如，组件 A 可以将 "message" prop 传递给组件 B，组件 B 可以在其 template 中使用 {{ message }} 来访问这个 prop 的值。

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

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


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

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

总结

Vue.js 提供了多种组件通信方式，每种方式都有其各自的优缺点，开发者可以根据具体场景选择最合适的通信方式。

父子组件通信：通过 props 和 scoped slot 来实现。props 允许父组件向子组件传递数据，scoped slot 允许子组件在父组件中使用父组件的数据和方法。
兄弟组件通信：通过 EventBus、Vuex 和 props 来实现。EventBus 是一个全局事件总线，它允许组件之间发送和接收事件。Vuex 是一个状态管理库，它允许组件共享状态。props 也可以用于兄弟组件通信，但需要在两个组件之间建立父子关系。

在选择组件通信方式时，开发者需要考虑以下因素：