This article has participated in the “Digitalstar Project” and won a creative gift package to challenge creative motivation.
We all know that VUE is componentized, so component communication is the foundation of VUE. Before we get to component communication, let’s answer a few questions to verify whether you have componentized development in your daily work.
1. How does a parent component pass values to a child component?
2. How does a child component pass a value to its parent?
3. How to transfer values between any components?
4. How does a parent component call a method in a child component?
5. How does a child component call a method in a parent component?
6. How to call methods in components between any components?
Verification mode:
If you can answer each question in at least one way, it shows that you are familiar with componentized development in your daily development work.
② If you can answer each question in a variety of ways, and can describe the pros and cons of each way, you are fully equipped for componentized development.
③ If you can’t answer some of the questions, or are vague, it shows that you lack componentized development thinking in your daily work.
I know some people will not accept! East east a, how can you judge whether I have componentized development thought through these a few problems?
Let’s just say that componentized development is not simply copying code from the UI framework and putting it all in a file. That’s a component, but I don’t think that’s really componentized development. If you want to call it componentized, sorry!!
Components are classified as page-level components, project-common components, module-common components, and can even be packaged as button-level components.
If you have a componentized development mindset in your daily development, you are bound to run into these six problems.
So let’s take a look at this diagram, which I don’t think I need to explain to you, because you all look at requirements documents a lot.
Below, I will answer the above six questions in my own most common way.
1. How does a parent component pass values to a child component?
The parent component passes values to the parent component through props.
Preconditions: Index represents the parent component and Children represents the child component.
How does the father pass?
The data in the parent component defines a data MSG, which is passed to the child component by familiarity. The attribute before = is passed to the child component, and the value after = is referenced in data.
How does a child receive?
The child component receives values from the parent component via props as in data, {{}} in temple, and this in methods. Properties.
Effect:
2. How does a child component pass a value to its parent?
The child component fires custom events through $emit.
How to pass?
The child emits a custom event defined in the parent via $emit. It can pass two values, the first is the name of the custom event and the second is the value to be passed.
How does the parent receive?
The parent component receives a value from the child component in a custom event and assigns it to data, rendering it to the page.
Effect:
3. Does any component pass the value?
Any component passes values through the central event bus $BUS
The AA component is called A component, and the BB component is called B component. Although this is A sibling relationship, there is no relationship between A component and B component.
Define a central event bus to mount to a VUE instance.
How is A component sent?
throughthis.$bus.$emitsend
How does component B receive?
throughthis.$bus.$onreceive
Methods in the parent component tune component?
Ref: If 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, and you can call the component’s methods directly from the instance or access the data through the ref binding component, through this.$refs. Component name. Method name that calls a method in a child component
The parent component:
Child components:
Effect:
A child component calls a parent component’s method?
Passing from child to parent does two things: first, it kicks the event to the parent, and second, it passes the data to the parent. The first parameter corresponds to the event, the second parameter corresponds to the data, and the second parameter may not be passed.
Child components:
The parent component:
However, component communication is much more than that, and the six scenarios above use only three of the following ways:
A:props/$emit(Father to son, son to father, son to father)
2:$bus(Any component value, any component tuning method)
Three:ref/resf(Parent tone)
Here are the five remaining ways for components to communicate.
Four:$parent/ $children
Take a look at the official introduction, in fact, you know the above three ways, this is not required to master, the official is not recommended. But we get it.
Let’s print $parent in the child component
So if I go to the console and I see that this is a component instance, what does that mean, what does that mean is that I have access to all the properties and methods on the component, and we can see the MSG of my child component.
Use the child component in the A component, trigger this event, and print the A component column.
For performance optimization, students are recommended to use this method
2. Son to father? Let’s print $children inside the parent component
Open the console
This is exactly the same order in which we use the children inside the parent.
Let’s open up one of the child components and take a look
For example, we want to use the properties in the third child component AA.
Open the console and verify.
Five:provide/reject
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 for as long as its upstream and downstream relationships are established. If you’re familiar with React, this is very similar to the context features of React.
Tip:provide 和 injectBindings are not responsive. This is intentional. However, if you pass in a listening object, the object’s property is still responsive
Index has A child component A, and c has A child component C
Inside the parent index component:
In the sun component C:
Page effect:
6: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 rules to ensure that the state changes in a predictable way.
Vuex modules: 2. state: used for data storage, which is the only data source in store. Getters: Like computing attributes in Vue, it is based on secondary packaging of state data, and is often used for data screening and correlation calculation of multiple data. Actions: similar to mutation, used to submit mutations to change the state without directly changing the state, can include any asynchronous manipulation modules: Similar to a namespace, used in a project to separate the state of each module definition and operation, easy maintenance \
In fact, vueX has a lot of content, so I can’t finish it in a short time and explain it clearly. Let’s talk about it separately next time. This time you will be perfunctory, understanding, ha ha ha.
Register vuex in main.js
It’s in index under Storex.
At this point, the data is in the shared state and can be accessed directly on any page:
Seven:localStorage/sessionStorage
Local storage is also very simple, there is nothing to talk about, it often with vuEX management of some project public basic data, this I will simply share with you several ways to write it, talk less nonsense, directly look at the picture.
Store strings:
Writing method introduction:
Open local storage:
Open the console:
The above method can only store strings, not objects. To store objects, use json.stringify () to convert them to strings. Parse to restore to objects using json.parse.
Store array objects:
Writing method introduction:
Open local storage:
Open the console:
Eight:$attrs/$listeners
$attrs:Contains attribute bindings that are not recognized (and retrieved) as prop in the parent scope (class 和 styleExcept). When a component does not declare any prop, it contains all bindings for the parent scope (class 和 styleExcept), and can passv-bind="$attrs"Pass in internal components – useful when creating high-level components.
The parent component
Child components:
inheritAttrs:Attribute bindings, which are not recognized as props in the parent scope, are “rolled back” by default and applied to the root element of the child component as normal HTML attributes. This may not always behave as expected when writing a component that wraps one target element or another. By setting theinheritAttrs 到 falseThese default behaviors will be removed. Instead, pass the instance Property (also new in 2.4)$attrsYou can make these attributes valid and passv-bindExplicit binding to non-root elements.
Note: This option does not affectclass 和 styleBinding.
Sun components:
Page effect:
$listeners:Contains objects in the parent scope.nativeModifier of)v-onEvent listeners. It can go throughv-on="$listeners"Passing in internal components – useful when creating higher-level components.
The parent component:
Sun components:
Conclusion:
A:props/$emit(Father to son, son to father, son to father)
2:$bus(Any component value, any component tuning method)
Three:ref/resf(Parent tone)
Four:$parent/ $children(Parent and child components)
Five:provide/reject(Cross-level components)
6:Vuex(Any component)
Seven:localStorage/sessionStorage(Any component)
Eight:$attrs/$listeners(Cross-level components)
Ok, everyone understand more understanding, this article is over. Had better oneself start work knock knock effect better!
Previous articles of the author:
The second stage:Learn how to use XSS attack to experience a hacker
The first phase:How do I use Git in my work?
This article due to limited ability, some places may be relatively rough, if you have questions can add my wechat communication learning oh! My WeChat: F18886307338, please note: nuggets