How to make calls between vue components

Vue is a very popular JavaScript framework in modern web development, of which components are a very important part. In Vue, components can be reused, and communication between components is also a problem often encountered in development. This article will introduce the communication issues between Vue components and explore in detail how to "make calls" between Vue components.

1. Communication between Vue components

In Vue, communication between components is mainly divided into two ways: parent-child component communication and non-parent-child component communication.

1. Parent-child component communication

In the Vue component, the parent component can pass data to the child component through props.

Parent component Template:

<template>
  <div>
    <child :message="message"></child>
  </div>
</template>

Child component Script:

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

The way the parent component transfers data to the child component is very simple. You only need to add the props attribute to the child component tag. , and just add the transfer data required by the subcomponent.

After receiving the data passed by the parent component, the child component can use this data in the template:

<template>
  <div>
    {{message}}
  </div>
</template>

Transmitting data to the child component through props is one of the most commonly used parent-child communication methods in Vue. one. In practice, we may also need to execute the parent component's methods or manipulate the parent component's data. In this case, the event emit can be used to communicate between the parent component and the child component.

Parent component:

<template>
  <div>
    <child @sendMsg="updateMessage"></child>
  </div>
</template>

<script>
  export default {
    data () {
      return {
        message: ''
      }
    },
    methods: {
      updateMessage (msg) {
        this.message = msg
      }
    }
  }
</script>

Use $emit method to trigger sendMsg event in child component

<script>
  export default {
    methods: {
      sendMessage () {
        this.$emit('sendMsg', 'Hello Vue!')
      }
    }
  }
</script>

2. Non-parent-child component communication

In Vue, if If the component is not a parent-child relationship, the communication between components can use the event bus officially provided by Vue.

Specific implementation method:

Create a new eventBus.js file

import Vue from 'vue'

export const eventBus = new Vue()

In the component that needs to communicate, import eventBus.js and use $emit to trigger the event:

<script>
  import { eventBus } from './eventBus.js'

  export default {
    methods: {
      sendMessage () {
        eventBus.$emit('sendMsg', 'Hello Vue!')
      }
    }
  }
</script>

Receive events:

<template>
  <div>
    <h1 id="message">{{ message }}</h1>
  </div>
</template>

<script>
  import { eventBus } from './eventBus.js'

  export default {
    data () {
      return {
        message: ''
      }
    },
    created () {
      eventBus.$on('sendMsg', (msg) => {
        this.message = msg
      })
    }
  }
</script>

This method allows communication between different components, but there are certain disadvantages: when the application is very complex, it is difficult to track the communication links between components.

2. Communication methods and selections between components

In the application development process, it is necessary to choose a communication method suitable for the application to improve development efficiency and performance.

1. Parent-child component communication

is suitable for situations where parent-child components need to transfer data or perform operations. This method is relatively simple and easy to maintain and debug.

2. Non-parent-child component communication

Applicable to situations where communication is required between cross-level, brothers and other non-parent-child components. Using the event bus method can simply implement communication between components, but it can easily lead to difficulty in debugging and increased complexity.

3.Vuex

Vuex is the state management library officially provided by Vue, which is used to manage the state in the application (including data and operations). Suitable for larger projects when large amounts of data need to be shared.

Using Vuex, you can put the communication between components into the Vuex store, and then let the required components obtain the data in the store through getters or use actions to trigger state changes in the store, update the data in the store, and then Notify other components.

Summary:

In Vue development, the communication problem between components is a common problem. We can choose parent-child component communication, non-parent-child component communication, and Vuex status according to the actual situation. manage. Proper use of these methods can improve application development efficiency and performance.

The above is the detailed content of How to make calls between vue components. For more information, please follow other related articles on the PHP Chinese website!