Communication between components is required. It can be understood that the child component is an empty shell, and the parent component that calls the child component gives it its soul.
Business logic example:
When using the select component, the parent component needs to pass data to the child component to indicate which select data to use. For example, {"text":"Chongqing","v":"cq"} -- parent-child
When Chongqing is selected, the child component needs to return a value to the parent component-->cq -- child to parent
// Parent-to-child understanding: The parent component uses v-bind to dynamically bind events and pass in parameters, and the child component uses props to get parameters and use them as follows: Parent-to-child: props This property is passed: array, object. Array: props:[ 'a parameter' ] Object: can specify type { 'myval':number } such as {'myval' :[number,String]} /* Child-to-parent understanding: the child component binds the event and registers a custom instruction and passes in the parameters, and then in the child component called by the parent component Use the registered custom command, and then trigger the method to get the returned parameters. */ The implementation is as follows: Step 1: this .$emit('child-to-far',"hello" ); Register custom events and pass in parameters Step 2: <my-child v-on:child-to-far="getSomeThing"></my-child> Introduce the component to call custom instructions in the parent component Step 3: Add getSomeThing to the methods of the parent component (msg){ console.log(msg)} Another way of passing from father to son: Business example: The child component is a dialog, and the parent component needs to pass some html code into the dialog, so that the dialog displayed by the child component in different places is rendered differently. If the parent component needs to pass template (html) instead of data into the child component. You can use <p solt="header"></p> ----- parent component code <solt name="header"></sole> --- Subcomponent code. The above two pieces of code indicate that the parent component defines the solt attribute as the header, and the child component uses the solt tag attribute name to correspond to the value of the parent component solt This lets you know where the parent component wants to write to the child component
Dynamic component: is
Business scenario: When the parent component may use subcomponent A or subcomponent B, it can be used when the two are switched.
Use comprehension: use :is to bind a parameter, then assign the parameter to the component name, and then change the parameter to another component in the method
Implementation: Define <p :is="curr"></p> in the template, then define this curr='comA' in data and then change the curr in the method
props The data passed in from the parent component is a one-way data flow. Changes in the child component will not affect the parent component. //2018-04-22 Mack to understand later
If you need to make changes, please refer to the link below