The problem of passing parameters in vue components (global registration, local registration)

One, the definition of parent-child components

There are two definitions of parent-child components, which I call regular parent-child components and special parent-child components.
　　1.1, conventional parent-child components

Import other components as import and use a custom tag to receive, register the tag in the component of the current component, and use it directly on the page as a <custom tag></custom tag>. The current component is the parent component, and the imported component is the child component.
Introduce sub-components:　

Register subcomponents:

Use subcomponents:

1.2. Special parent-child components 　　 The components
　　are defined in the routing. The components contain children. They are also regarded as parent-child components by using the form on the page. The current component is the parent component and the router-view routing is the child component. 　Introduced in main.vue: the

current main.vue is the parent component, and the container.vue introduced by the router-view is the child component.

Second, the data and method functions of the parent component are passed to the child component

2.1. Conventional parent components pass parameters to child components
　　Data and methods
on main.vue parent component: Pass data and methods on main.vue parent component:
　Introduce parent component to pass overworked data and data on header.vue child component Method: 　Use the data and methods passed by the parent component on the header.vue child component:

2.1. Pass the special parent component to the child component

The parent component of main.vue is basically the same as the above. The difference is that "v-on:" or "@" is used when passing the method function of the parent component, instead of ":"
. It is basically the same on container.vue child components. The difference is that the parent is accepted. The method function passed by the component does not use props. By defining a new method in methods, write this.$emit('testRouter','val') in the method body to obtain the method of the parent component in this form. Assign value to the newly defined method of the child component. Note that alert1 is the name defined by the parent component when binding. If the method takes parameters, add an empty string to val.

Three, the child component passes data and method functions to the parent component

3.1. Conventional child components pass data and methods to the parent component

(1) Passing data: child components pass data to parent components mainly through events

The child component defines a method in which the data num is sent through this.$emit('transferNum',this.num), and the parent component listens to the transferNum event. When the event is triggered, the function is executed and the value is assigned.

The data and sending data method of the
child component : the method of monitoring the sending function in the child component in the parent component and assigning values.

In this way, the num data in data can be used in the parent component.
(2) Transfer method: The child component has a well-defined method, and the parent component adds an identifier to the custom tag when referring to the child component, ref=”child1”, to indicate the child component. The parent component defines its own method name in methods, the method body: this. $R\; \&\; ltEFS.CHILD.\; 1.FUn-.Italianthinkisthroughover-tunewith$ called subassemblies child1's the fun in the name of the method refs, assigned to the parent component.

Sub-component definition method: When
referencing the sub-component in the parent component, add an identifier rel='abc'. Note that rel is a syntax, abc is
a method defined in the parent component. The setFun method in the child component. Call gerFun method
　3.2, special child components pass data and methods to the parent component

After testing, the data and methods of the special child components to the parent component are the same as the data and methods of the ordinary child components to the parent component.

Four, brother components pass value

4.1 Introduction of brother components

Two components as child components are referenced by the same parent component
4.2, settings in main.js

4.3. The syntax
component Header.vue between the two brother components needs to define a method to send data, here sendMsg is the method defined here, this function is triggered when the page is clicked, and the function body uses $emit via the Bus central event bus Send a send event, the function of the event is to transmit a "hello world!" data, distinguish between sendMsg and send, the former is the click event of the current page, the latter is the event sent out and needs to be monitored by other components.

In the component Copy.vue, when the life cycle is created, use $on to monitor the send event sent in component 1 through the Bus central event bus, and use a callback function with parameters to receive the passed value, and the parameters are passed Value, assign the value to the variable of the current component.

　Brother components will not call each other's methods. If they are used multiple times, they will be individually packaged into a method in a separate js format file and called directly at that time.