Commonly used method

1. The parent component passes values to the child component

The subcomponent is introduced by attribute passing, which binds properties: attribute name or V-bind: attribute name. The subcomponent receives the value passed through props

2. Child components pass values to parent components

Events and arguments are passed to the parent component via this.$emit

3. Parent component calls child component methods

(a) Add a ref reference to the child component. The parent component can find the child component through this.$refs, and can also operate on the child component’s methods: this. Subcomponent method; (b): With $children, we can get a collection of all the children: this.children[0]. methods

The $children instance property has been removed from Vue 3.0 and is no longer supported.

The child component calls the parent component method

$parent finds the parent component and calls its method: this.$parent. Parent component method

5. Communication between horizontal components

(a) Create a public file eventbus.js, just create an empty vue instance export default new vue (); Pass events and parameters through eventbus.$emit() and receive events and parameters through eventbus.$on().

The $ON, $OFF, and $once instance methods have been removed, and the application instance no longer implements the event-triggering interface. Existing Event Hubs, such as Mitt or Tiny-Emitter, can be replaced with external libraries that implement event-triggering interfaces.

(b) : use vuex

Other methods

1. Sync modifier

Trigger an event in the update:myPropName mode, for example, in a subcomponent containing a hypothetical name prop, we can express the intent to assign a new value to it as follows: This.$emit(‘update:name’, newName) the parent component can then listen for that event and update a local property(title, parent component property) as needed, thus updating the parent component property title by updating the child component property name.

<child
  v-bind:name="title"
  v-on:update:name="title = $event"
></child>
Copy the code

PS: Note that v-bind with the.sync modifier cannot be used with expressions (e.g. V-bind :name.sync= “title + ‘! ‘” is invalid). Instead, you can only provide the name of the property you want to bind to, similar to the V-Model. We can also use the.sync modifier with v-bind when setting multiple prop objects at the same time:
This will pass each property (such as title) in the object as a separate prop, and then add v-on listeners for each update. Using v-bind.sync on a literal object, such as v-bind.sync= “{title: doc.title}”, does not work because there are many edge cases to consider when parsing a complex expression like this.

2, dojo.provide/inject

Provide and Inject mainly provide use cases for high-level plug-in/component libraries. Direct use in application code is not recommended. This pair of options needs to be used together to allow an ancestor component to inject a dependency into all of its descendants, regardless of how deep the component hierarchy is, and remain in effect as long as the upstream and downstream relationship is established. If you’re familiar with React, this is very similar to the context features of React. For example, implement a page refresh function (reload method) in the root component

provide() {
    return {
        reload: this.reload
    }
}
Copy the code

And implement reload method in methods. In the descendant component, inject: [‘reload’], which is called directly (this.reload()).

3, $root

The root Vue instance of the current component tree, which will be itself if the current instance has no parent. It is also possible to interact with data by accessing the root component, but in rare cases directly modify the data in the parent component.

4. Attrs and listeners

Vm. $attrs contains feature bindings (except class and style) that are not recognized (and retrieved) as prop in the parent scope. When a component does not declare any prop, all parent-scoped bindings (except class and style) are included, and internal components can be passed in via V-bind =”$attrs” — useful when creating higher-level components. In simple terms, it contains properties that all parent components set on child components (except properties, classes, and styles passed by prop). Concept understanding: Mainly used to transfer data across hierarchies (multiple hierarchies, usually more than two). Data transfer directions are: top-down, grandpa component >father component >son component; Name,title,
;
; $attrs.name & this.$attrs.title; PS :(a), greater than or equal to three layers has practical significance; (b) Do not pass style attributes; (c) $attrs gets only inherited attributes; (d) $attrs automatically removes the same attribute if the child component declares it;

The vm.$Listeners contain V-ON event listeners in the parent scope (without the.native modifier). Internal components can be passed in via V-on =”$Listeners “– useful for creating higher-level components. Note that the listeners are an object that contains all listeners working on the component. The listeners can be directed to the child elements of the component by means of V-on =”$Listeners “. $attrs = $attrs; $attrs = $attrs; $attrs = $attrs; $attrs = $attrs;

Attribute bindings that are not recognized as props in the inheritAttrs parent scope by default will be “rolled back” and applied to the root element of the child component as normal HTML features. This may not always behave as expected when writing a component that wraps one target element or another. These default behaviors are removed by setting the inheritAttrs to false. These features are enabled by the instance attribute $attrs (also new in 2.4), and can be explicitly bound to non-root elements by V-bind. When the console DOM does not want to see inherited properties, set this value to false to hide them.

The above are vue2 attrs and listeners. Vue3 removes listeners and places them in attrs, including style and class listeners.