This is the 19th day of my participation in the Genwen Challenge

Interviewer: Tell me how you know components communicate

I:… πŸ’₯ πŸ’₯

preface

It can be said that the communication between Vue components is a necessary point for our interview, and the occurrence rate is very high. This question is similar to the open question. The more methods you answer, the more bonus points you get, indicating that you are more proficient in Vue.

Vue component communication refers to only the following three types of communication: parent-child component communication, intergenerational component communication, and sibling component communication

props / $emit

This is the most basic, I will not go into details.

ref 与 $parent / $children

Resolution: This applies to parent-child component communication

  • refIf used on a normal DOM element, the reference refers to the DOM element. If used on a child component, the reference refers to the component instance
  • $parent / $children: Accesses the parent/child instance

EventBus ($emit / $ON)

This approach uses an empty Vue instance as the central event bus (event hub) to trigger events and listen for events, enabling communication between any component, including parent, generational, and sibling components.

$attrs/$listeners

Resolution: Applicable to intergenerational component communication

  • $attrs: contains property bindings (except class and style) in the parent scope that are not recognized (and retrieved) by prop. When a component does not declare any prop, all parent-scoped bindings (except class and style) are included and can passv-bind="$attrs"Pass in internal components. Often used in conjunction with the inheritAttrs option.
  • $listeners: contains a V-ON event listener in the parent scope (without the.native modifier). It can go throughv-on="$listeners"Passing in internal components

provide / inject

Resolution: Applicable to intergenerational component communication

The ancestor component provides variables through provider, and the descendant component injects variables through Inject. Provide/Inject API mainly solves the communication problem between cross-level components, but its usage scenario is mainly that sub-components obtain the state of the upper level components, and a relationship between active provision and dependency injection is established between cross-level components.

Vuex

Resolution: Applicable to father-child, intergenerational, sibling component communication. The principle is somewhat similar to the event bus.

Vuex is a state management mode developed specifically for vue.js applications. At the heart of every Vuex application is the Store. A “store” is basically a container that contains most of the states in your app.

  • The VuexState storage is reactive. When a Vue component reads state from a store, if the state in the store changes, the corresponding component gets stateUpdate efficiently.
  • The only way to change the state in the Store isExplicitly commit mutation. This allows us to convenientlyTrack each state change.