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

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.

2. 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)
  }
}

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
  }
}

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.

3. 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)
  }
}

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')
    })
  }
}

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')
    }
  }
}

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

4. 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!