Table of contents
Splitting of components
Inter-component communication (parent-child)
Communication between parent and child components is important
Path hint plugin (handy)
Father to son (props)
2022.12.11 Review:
Think again that this is not a parent-to-child, it should be understood as a method called by the parent component (sub-component), then the parameters written when using the sub-component are the actual parameters (note that when writing the actual parameters, you need to add: , because it is dynamic binding) , the props defined in the subcomponent are not just formal parameters , such a simple principle of calling methods in Java is used here.
Object Usage (Common)
Incoming content can be restricted
nitty gritty
If it is an object type, the default value must be written as a function, returning this object!
When actually using it, pay attention to adding a colon (:) to the incoming parameter when calling the parent component
Official explanation of props
In the official documentation, you can see that no matter what type of props is passed in, you must add: to indicate that this is a dynamic parameter, because this is a JavaScript expression rather than a string.
Also very good answer given in chatgpt
There is a problem in actual use. In actual use, "" must be added, even if it is an array, and it must be added: otherwise it will not be displayed. Do not add: add: use
v
-
bind or abbreviation: to Props for dynamic binding:
one-way data flow
Non-prop defined attributes (understand rarely used)
The official website is called: Transparent transmission of Attributes
means that the props parameter is not defined, but it will also be passed on
From son to father (event)
Event-vue official website
The overall logic is to click in the child component, and pass the processing that needs to be done to the parent component for operation (including the required parameters). Pay attention to the
three steps of passing from child to parent.
First, declare in the emits of the child component
. Enter the event name = "the method name bound in the parent component"
$ starts with the methods that Vue provides us by default
this.$emit event
In the subcomponent, register emits first, and then use this.$emit("event name", outgoing parameter) to pass the event out.
In the method () of the child component, there is no need to add parameters, just write the parameters to be transmitted in emit (),
but, in the method () of the parent component, the parameters to be passed in should be written
In the parent component, where the child component is called, use @ to bind the event and accept the event passed by the child component
@The event name passed by the child component = "the event name accepted in the parent component". Then process the accepted events in methods.
The event names here can be consistent, and you need to understand its essential meaning.
Pay special attention, although the parameters are passed in the child component, but there is no need to bring parameters when binding the event here, you only need to write the event name, otherwise it cannot be displayed, but the methods in the methods of the parent component still need to bring the passed parameters of.
The method () of the parent component here is to write the parameters
Validation of custom events
Add one more emits to register, which has two advantages
1. When others look at the code, they will know that our component has these event names passed to the parent component for response, and know what it is for
2. Vscode is when we write code It will prompt us with these parameters, which is equivalent to knowing where this is used after registration.
To verify the event, it is rarely used, mainly because if there is a problem with the parameters, a warning will be reported on the console
Communication case exercises
The first time I tried it, it was a mess, and I even forgot to register the components. I will really thank you!
Let’s take a look at the teacher’s code first and then imitate it.
Now I feel that I need to rewrite the case of the shopping cart before writing this one. I really forgot too much.
Write it down by hand, then summarize.
an error
'vue-cli-service' is not recognized as an internal or external command, operable program or batch file.
The high probability of encountering this is that you did not install npm install at the beginning, and did not install the node_module that should be installed, that is, related dependencies. These dependencies are all in package.json, so it is best to npm install before starting the scaffolding project. First, download the dependencies and run them again.
Pay special attention to check before starting to see if the node_module exists. If not, it will not start, because the downloaded dependencies are not downloaded, and you must
npm install before starting. If it
fails, restart and try again.
When writing a project, you must sort out your ideas before getting started
Sort out the logic first, and then write each structure before getting started.
First, prepare the root component APP.vue, then prepare the component TabControl.vue that needs to be used , and register it (local component) before it can be used, and then write the content of the local component, which will be called by the root component.
The local component TabConttol is mainly responsible for implementing the navigation bar. It cannot be written to death. It needs to pass in parameters from the root component for dynamic display, so use v-for and props, use flex layout, pay attention to the order of writing, write html first, and build the
framework , then write css, and finally modify vue.js Transformation
:
the first step, the original html becomes a dynamic v-for template, which is displayed according to the parameters passed in, using props
Step two: add click events , this step is not easy to write, and there are many grammars in which I forgot to
dynamically bind this class. This should be very familiar. I haven’t written it for the first time. When the judgment behind active is true, class is equal to active , when you meet the conditions, the class is bound to you, and when the conditions are not met, it is not bound.
{} is an object syntax, and the active inside is a Boolean type.
Don't worry if you encounter problems. Sometimes it may not be your fault, but the browser has a problem. Don't be stuck all the time.