A brief analysis of how to pass parameters to parent sibling components in Vue

Vue is a popular JavaScript framework for building user interfaces and single-page applications. In Vue, components are the basic building blocks of an application, and they can be reused and combined to build larger applications. In a Vue component, you may need to pass parameters to its parent sibling components. This article will introduce in detail how to implement this function in Vue.

What is Vue?

Vue is a lightweight framework that is easy to use, concise code, powerful, mobile-friendly, etc. Vue's official documentation provides a complete set of tutorials and documentation as well as API documentation for easy use by developers. In addition, its community is very active, and there are many advanced frameworks like Nuxt.js that provide more help to developers.

Vue Components

Vue components are the basic building blocks in Vue applications. Components allow developers to build reusable UI components and combine these components to build larger applications. Vue components are built from the bottom up, with parent components containing child components, which may contain more child components, ultimately resulting in a complete application.

In this parent-child relationship, the parent component can pass data to the child component through the props attribute. Props is a property used to pass data to the component.

Parent-child component

In Vue, communication between parent-child components is a very common scenario. In the component tree, parent components can pass data to child components through props, making the data flow between components very simple. The parent component can have some data or methods, and the child component can be programmed based on these data and methods. Usually, child components receive data passed by parent components through props attributes, and then use these data for their own business logic.

The parent component uses the props attribute to pass data to the child component, and the child component uses the $emit method to send data to the parent component. However, in some scenarios, there is not a direct parent-child relationship, but a brother relationship (as shown in the figure below). In this case, the event bus EventBus or Vuex needs to be used to transfer data.

Sibling components

In Vue, communication between sibling components requires the use of a central event bus, EventBus. This event bus is a Vue instance that can be used to dispatch and listen for events. In a Vue instance, we can use the $on method to listen for events and the $emit method to trigger events. For sibling components, we need to import the central event bus into the window as a global variable, trigger an event through the $emit method in the component, and then listen to the event through the $on method in another component, and finally be able to receive the delivery correctly The data.

Using event bus to build communication between sibling components can make the code clearer, and there is no need to use Vuex to manage state, which is a relatively simple implementation method.

Code implementation

The following is an example of using central event bus communication in Vue. Assume that there are two sibling components and data needs to be transferred between them:

<!-- 兄弟组件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>

In the code, we use the Vue instance as the central event bus, send data to the event bus through the sendMessage method in sibling component A, and then listen to the event through the create method in sibling component B, and assign the received data to a constant message. Finally, the value of this constant is displayed in sibling component B to realize data transfer between sibling components.

Summary

In Vue, data transfer between father and son is very natural and direct, but data transfer between brothers requires the use of event bus or Vuex. In short, communication between sibling components in Vue is not difficult. We can use Vue's own event bus mechanism to easily transfer data. This approach is simple and easy to maintain, and does not require the use of redundant libraries or frameworks.

The above is the detailed content of A brief analysis of how to pass parameters to parent sibling components in Vue. For more information, please follow other related articles on the PHP Chinese website!