Home Web Front-end Vue.js Tips for using provide and inject to pass methods and events across components in Vue

Tips for using provide and inject to pass methods and events across components in Vue

Jun 25, 2023 am 11:02 AM
vue provide inject

Vue is an excellent open source front-end framework. It has the ability to quickly build user interfaces, simplifies the development process, and improves product development efficiency. Vue provides a variety of ways to pass data, including props, emit, $emit, vuex, etc. Using provide and inject at the component level is a more flexible way that can help us pass methods and events across components. In this article, we will focus on the techniques of using provide and inject in Vue to pass methods and events across components.

  1. What are provide and inject?

provide and inject are advanced component delivery methods in Vue, which allow parent components to pass data to descendant components that are farther away from themselves. We can make data accessible to all descendant components by providing it in the ancestor component.

  1. How to use provide and inject?

Let’s first use the example of binding the same method to multiple components to explain how to use provide and inject.

2.1 Ancestor component provides method

In the ancestor component, we define a method and provide it to all descendant components. The code is as follows:

import { provide } from 'vue'

export default {
  created() {
    const commonMethod = () => { alert('hello world') }
    provide('commonMethod', commonMethod)
  }
}
Copy after login

Here, we use the provide method to provide the commonMethod method to all descendant components. The first parameter of the provide method is the key name of the provided data, and the second parameter is the specific content of the provided data.

2.2 Descendant component receiving method

After receiving the provided method, we can use it in all descendant components. The code is as follows:

import { inject } from 'vue'

export default {
  created() {
    const commonMethod = inject('commonMethod')
    this.$commonMethod = commonMethod
  }
}
Copy after login

Here, we use the inject method to receive the commonMethod method. The parameter of the inject method is the key name of the provided data, and it will return the value of the provided data. In the created lifecycle, we bind the commonMethod method in the $commonMethod variable of the instance for use in the component.

  1. How to implement event delivery?

When implementing cross-component delivery of events, we need to use provide and inject to achieve this. Below we take as an example the event of clicking a button to trigger a descendant component.

3.1 Ancestor component provides events

In the ancestor component, we introduce an event class and provide it to all descendant components. The code is as follows:

import { provide } from 'vue'
import { EventEmitter } from 'events'

export default {
  created() {
    const emitter = new EventEmitter()
    provide('emitter', emitter)
  }
}
Copy after login

Here, we create a new EventEmitter instance in the ancestor component and provide it to the descendant component.

3.2 Descendant components listen to events

In descendant components, we use the inject method to get the provided event and listen to it so that the corresponding logic can be executed after the event is triggered. The code is as follows:

import { inject } from 'vue'

export default {
  created() {
    const emitter = inject('emitter')
    emitter.on('event', () => {
      console.log('emit event')
    })
  }
}
Copy after login

Here, we use the inject method to receive the provided event emitter and listen to the event 'event' in the created life cycle. When the event is triggered, we execute the corresponding logic.

3.3 Triggering an event

When triggering an event, we need to get the emitter and trigger it. The code is as follows:

import { inject } from 'vue'

export default {
  methods: {
    emitEvent() {
      const emitter = inject('emitter')
      emitter.emit('event')
    }
  }
}
Copy after login

Here, we use the inject method to get the provided event emitter, and trigger the event 'event' in the emitEvent method.

  1. Summary

Through the introduction of this article, we have learned how to use provide and inject to pass methods and events across components. Using provide and inject at the component level of Vue allows us to pass data and events more flexibly, effectively reducing the complexity of templates or props. At the same time, provide and inject also provide functions similar to DI (dependency injection), making Vue's architectural design more scalable and maintainable.

The above is the detailed content of Tips for using provide and inject to pass methods and events across components in Vue. For more information, please follow other related articles on the PHP Chinese website!

Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Hot Article Tags

Notepad++7.3.1

Notepad++7.3.1

Easy-to-use and free code editor

SublimeText3 Chinese version

SublimeText3 Chinese version

Chinese version, very easy to use

Zend Studio 13.0.1

Zend Studio 13.0.1

Powerful PHP integrated development environment

Dreamweaver CS6

Dreamweaver CS6

Visual web development tools

SublimeText3 Mac version

SublimeText3 Mac version

God-level code editing software (SublimeText3)

How to use echarts in vue How to use echarts in vue May 09, 2024 pm 04:24 PM

How to use echarts in vue

The role of export default in vue The role of export default in vue May 09, 2024 pm 06:48 PM

The role of export default in vue

How to use map function in vue How to use map function in vue May 09, 2024 pm 06:54 PM

How to use map function in vue

The difference between event and $event in vue The difference between event and $event in vue May 08, 2024 pm 04:42 PM

The difference between event and $event in vue

The difference between export and export default in vue The difference between export and export default in vue May 08, 2024 pm 05:27 PM

The difference between export and export default in vue

The role of onmounted in vue The role of onmounted in vue May 09, 2024 pm 02:51 PM

The role of onmounted in vue

What scenarios can event modifiers in vue be used for? What scenarios can event modifiers in vue be used for? May 09, 2024 pm 02:33 PM

What scenarios can event modifiers in vue be used for?

What are hooks in vue What are hooks in vue May 09, 2024 pm 06:33 PM

What are hooks in vue

See all articles