How to communicate in different situations in vue? way to share

How to communicate in different situations in vue? The following article will analyze the communication methods in different situations invue. I hope it will be helpful to everyone!

In fact, everyone is familiar with component communication in vue. Even if you open your mouth, after all, this is what is often asked in interviews. Since I had not considered it carefully before, when I was writing a small project, I encountered the need for communication in components, and then I started writing it. It turned out that it was useless. After checking for a long time, I realized that that method was not suitable for this situation. So after this incident, I decided to write an article to classify communication methods more clearly and carefully. After all, not every communication method is suitable for all scenarios. (Learning video sharing:vuejs tutorial)

Same window (that is, the same tab in the same browser)

Same What is mainly involved in the same page tab of the browser is the value transfer between parent and child components.

vuex: State Manager: Applicable to any component in a project, extremely inclusive

You probably don’t know the concept of a state manager. strangeness.

• Multiple components can share one or more status values. No matter how deep the component hierarchy is, it can be accessed normally. So this is an officially directly supported communication method.
• Note:For small single-page applications, this option is not very recommended. For small projects, using vuex will become more cumbersome, like a 75kg 150cm The clothes worn by a 170cm and 110kg person look very baggy and cannot be held up.

provide / inject (written based on v2.2.1 and above): suitable for N-level components, but must be the type of single-line inheritance

This pair Options need to be used together to allow an ancestor component to inject a dependency into all its descendants, no matter how deep the component hierarchy is, and for as long as the upstream and downstream relationships are established.

• It is equivalent to a building with N floors. The top level is the parent component. There is a common pipe between each floor. This pipe is provide. The pipe has an exit on each floor called: inject
• Note:provideandinjectbindings are not responsive. However, if you pass in a listenable object, the object's properties are still responsive.
• Let’s take a look at the code

// parent.vue // 此处忽略template模板的东西 

// child.vue // 此处忽略template模板的东西 

props: applies to the value passed by two adjacent components (parent->child); $emit: child-> Parent

Serious props/$emit are too common, and they are all overused, so there is no need to write sample code.

• Only applicable to value transfer between parent and child components at adjacent levels
• Although props can also be used to transfer values for multi-level components, but this will make the code Very difficult to maintain and highly not recommended.

eventBus: The status is similar to that of vuex. It is suitable for any component and is extremely inclusive.

Problem:

• It is not convenient to maintain. : If used too much in a project, method name conflicts may cause exceptions, and it is more inconvenient to troubleshoot.
• Example:

// utils/eventBus.js import Vue from 'vue' const EventBus = new Vue() export default EventBus

// main.js // 进行全局挂载 import eventBus from '@/utils/eventBus' Vue.prototype.$eventBos = eventBus

// views/parent.vue