Before we talk about the three common ways of passing values in Vue components, we need to know the benefits of using them so that we will be more motivated to learn them. Benefits: for some high reusability of function, we can encapsulate calls, we are in the js to encapsulated with function, and in Vue components, we can use the component to encapsulate them, this will make the page look more neat, so we need to learn to give components between the values to apply them.
The common value transfer methods of Vue components are as follows: 1. The parent component transmits values to its child component. 2. Child components transmit values to parent components. 3. Brothers send values to each other. Below I will introduce each of these values through some simple code.
Parent component passes value to child component
Value passing from parent to child is the most common method of value passing, also known as “props”. As the name implies, value is passed using the props property.
Writing steps:
- Write the common parent component structure VM, write content to the parent component through data;
- Use Vue.com Ponent to create a child component, set a custom label name, and write the custom label to the parent component.
- Add custom attributes and attribute values to the custom tags in the parent component, which are received as an array of props in the child component;
- String concatenation of the parent component’s template into the child component.
Browser display:
Browser display:
Child component passes value to parent component
Passing from child to parent is a bit more complicated than passing from parent to parent. Because of the one-way data flow (data is passed in one direction only, and the data is passed in one direction only), you cannot use props to modify the content of the parent element directly, but it does use the $emit syntax for passing
Writing steps:
- Write the structure of the parent component VM and the child component son, write their labels to the parent component and set the property sonmsg used to receive data in the parent component VM;
- Set the child’s data in the child’s data, add a button to the child’s template, and add a click event to it;
- Write the $emit execution function in the methods of the child component, pass the data of the child component to the custom tag son in the parent component through the custom event function ‘my-event’, use @custom event function ‘my-event’ to send the received data to its own attribute value, that is, handle1 function; Note: Methods need to add this
- Set the handle1 function in the parent’s methods to assign the received child component data to the parent component property SONmsg.
Sibling components send values to each other
Due to the need to write two components, the author can only cut three graphs, please connect to see the biggest feature of brother components, is to define an event center, through its three events to let brothers send values to each other, the three events are respectively: event monitoring, event triggering, event removal.
Writing steps:
- Create the structure of parent component and sibling component, write the custom label of sibling component into the parent component;
- Declare the center of the incident;
- Mounted In the life cycle of the sibling component, set the event listener function to listen for custom events. In the data column, set the value of its own data and the attribute used to receive the sibling data to null.
- Set a button in the template of the sibling component and add a click event. Add an event trigger for the click event in Methods. By event trigger, the event listener will receive the data, assign the data to the attribute used to receive the sibling data, and render it on the page through interpolation expressions in the string template
Note: All data can be passed across components. Is passed in the center of the event
