什么是Vue?

Vue组件

父子组件

兄弟组件

代码实现

总结

首页

web前端

前端问答

浅析vue中怎么向父级的兄弟组件传递参数

PHPz

Apr 11, 2023 pm 03:09 PM

Vue是一款流行的JavaScript框架，用于构建用户界面和单页应用程序。在Vue中，组件是应用程序的基本构建块，它们可以被复用并组合起来构建更大的应用程序。在一个Vue组件中，可能需要向它的父级的兄弟组件传递参数，本文将详细介绍Vue中怎么实现这个功能。

什么是Vue?

Vue是一个轻量级框架，特点是易于上手, 代码简洁, 功能强大, 对移动端友好等等。Vue 的官方文档提供了一套完整的教程和文档以及 API 文档，以便开发人员轻松使用。另外，它的社区非常活跃，也有许多像 Nuxt.js 这样的高级框架为开发人员提供了更多的帮助。

Vue组件

Vue组件是Vue应用程序中的基本构建块。组件使得开发者能够构建出可重用的UI组件，同时也可以组合这些组件构建出更大型的应用程序。Vue 组件采用自下而上的方式构建，父级组件包含子级组件，子级组件可能又包含更多的子级组件，最终得到完整的应用程序。

在这个父子关系中，父组件可以通过props属性向子组件传递数据，props是一种用于向组件传递数据的属性。

父子组件

在Vue中，父子组件之间的通信是非常常见的场景。在组件树中，父组件可以通过prop将数据传递给子组件，使得组件之间的数据流变得很简单。父组件可以带有一些数据或方法，子组件可以在这些数据和方法的基础上进行编程。通常，子组件通过props属性接收父组件传递的数据，然后将这些数据用于自己的业务逻辑。

父组件使用props属性将数据传递给子组件，子组件使用$emit方法向父组件发送数据。但是在一些场景下，并不是直接父子关系，而是兄弟关系（如下图所示），这时需要使用事件总线 EventBus 或Vuex 来进行数据的传递。

兄弟组件

在Vue中，兄弟组件之间的通信需要使用一个中央事件总线EventBus。这个事件总线是一个Vue实例，它可以用于派发和侦听事件。在Vue实例中，我们可以使用$on方法来监听事件，$emit方法来触发事件。对于兄弟组件，我们需要将中央事件总线作为全局变量导入到窗口中，在组件中通过$emit方法触发一个事件，然后在另一个组件中通过$on方法监听这个事件，最后能够正确地接收到传递的数据。

使用事件总线来构建兄弟组件之间的通信可以让代码更清晰，而且不需要使用Vuex来管理状态，是一种较为简单的实现方式。

代码实现

下面是Vue中使用中央事件总线通信的一个例子，假设有两个兄弟组件，它们之间需要进行数据的传递：

<!-- 兄弟组件A -->
<template>
  <div>
    <button @click="sendMessage">发送数据</button>
  </div>
</template>

<script>
  export default {
    methods: {
      sendMessage() {
        // 将数据作为参数传递给事件
        this.$bus.$emit('message', '这是一条来自兄弟组件A的消息')
      }
    }
  }
</script>

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

<script>
  export default {
    data() {
      return {
        message: ''
      }
    },
    created() {
      // 监听事件，传递数据到message
      this.$bus.$on('message', (message) => {
        this.message = message
      })
    }
  }
</script>

<!-- 中央事件总线 -->
<script>
  import Vue from 'vue'
  export default new Vue()
</script>

登录后复制

在代码中，我们使用了Vue实例作为中央事件总线，通过兄弟组件A中的sendMessage方法将数据发送到事件总线，然后在兄弟组件B中通过created方法监听事件，并将接收到的数据赋值给一个常量message。最后，在兄弟组件B中展示这个常量的值，实现了兄弟组件之间的数据传递。