props/ $emit

1. The parent component passes the value to the child component

  • The child component creates a property in props to receive the value passed by the parent component;
  • Register child components in parent component;
  • Add the properties created in the props binding subcomponent to the subcomponent tag;
  • Assign the value that needs to be passed to the child component to this property.

Props can only be passed from the upper-level component to the lower-level component (parent and child components), a so-called one-way data flow. Also, props is read-only and cannot be modified, and any changes are invalidated with warnings.

2. Child components transmit values to parent components

  • A child component needs some way (such as a click event) to trigger a custom event;
  • The value to be passed as the second argument to this.$emit will be passed as an argument to the method that responds to the custom event;
  • Registers the child component in the parent component and binds listeners to custom events on the child component label

$children / $parent

A child instance can use this.parent to access the parent instance, the child instance is pushed into the parent’s parent to access the parent instance, the child instance is pushed into the parent’s parent to access the parent instance, and the child instance is pushed into the parent’s children array.

For communication between parent and child components, it is more common to use props for communication between parent and child components. Neither can be used for communication between non-parent components.

provide/ inject

Provide/Inject is a new API in Vue2.2.0. Simply put, provide variables in the parent component and inject variables in the child component.

Note: As long as inject is called, it is possible to inject data in provide, regardless of how deeply nested the child component is, rather than being limited to returning data from the props property of the current parent component

ref / refs

Ref: If used on a normal DOM element, the reference refers to the DOM element; When used on a child component, the reference refers to the component instance, through which you can directly invoke the component’s methods or access data.

eventBus

The eventBus, also known as the eventBus, can be used in a vue as a communication bridge, as if all components share the same event center to which they can register or receive events, and all components can notify other components.

  • Create an eventBus, such as eventbus.js, new a vue object and expose it as a communication bridge.

  • Add eventBus.js(import {bus} from ‘./ eventbus.js ‘) to the component that needs to send values, and use bus.$emit() to emit a custom event and pass parameters;

  • / / Add eventBus.js to the component that needs to receive data. / / Add bus.$on to the mounted() hook function to listen for custom events and handle arguments passed in the callback function.

When projects are large, they tend to cause disasters that are difficult to maintain

Vuex

Vuex is a state management mode developed specifically for vue.js applications. It uses centralized storage to manage the state of all components of an application, and uses the same rules to ensure that state changes in a predictable way. To put it simply: When an application encounters state shared by multiple components, use Vuex;

Scenario: When multiple components share data or transfer data across components.

Vuex modules

  • State: used to store data and is the only data source in the store;
  • Getter: A secondary wrapper based on state data, like a computed property in VUE, used to filter data and calculate correlations between multiple data.
  • Mutations: similar to a function, the only way to change state data and cannot be used to handle asynchronous events
  • Actions: Similar to mutation, used for submitting mutations to change the state, rather than directly changing the state, and can include arbitrary asynchronous operations;
  • Modules: Similar to a namespace, used in a project to define and manipulate the state of modules separately for easy maintenance.