What are the five ways to pass values in vue components?

Five ways to pass values in vue components: 1. Parent component passes value to child component; 2. Child component passes value to parent component; 3. Passes parameters between adjacent sibling components; 4. Parameters are passed between distant sibling components; 5. EventBus parameters are passed.

The operating environment of this tutorial: windows7 system, vue2.9.6 version, DELL G3 computer.

Vue’s communication method can also be said to be the parameter passing method:

• Parent component passes value to child component:

• Subcomponents pass values to parent components:

• Pass parameters between adjacent sibling components (brothers)

• Passing parameters from distant brothers (cousins)

• EventBus passing parameters
  

1. Passing parameters from father to son

Principle : The parent controls the child. Through the props attribute of the child component, it throws the child component's custom label attribute to receive the operating status of the parent component.
Example: A button in the parent controls the display and hiding of a p in the child component.

     
    
 父按钮 
   
     

Effect:

2. Passing parameters from parent to child

Principle: The child controls the parent, and the child component binds custom events. To handle the method function of the parent component, trigger your own custom event through .$emit('custom event',[parameter])
Example: a button in the child component controls a p in the parent component Show hide

Effect:

3. Passing parameters from adjacent brothers (brothers)

Principle: through a public parent The element serves as a bridge (instance component), combined with parent-child props parameter passing and child-parent custom events

Example: c1 and c2 are brothers. c1 can control the display and hiding of elements in c2

     
   
 父级状态 
{{state}}
 
  
  
      

Effect ：

4. Passing parameters from distant brothers (cousins)

Principle: By creating an intermediate instance and registering an event, in the controlled component, The function to be executed is carried through the event. In the main control component, the corresponding operation is changed through the event

Effect:

Before clicking :

After clicking:

##5. EventBus passing parameters

Vue.prototype.$EventBus = new Vue()

vue.js Tutorial"

The above is the detailed content of What are the five ways to pass values in vue components?. For more information, please follow other related articles on the PHP Chinese website!