Directory:

  1. The native environment
  2. Custom components (child components)
  3. Importing into the page (parent importing child)
  4. The parent component (the page that uses the custom component) passes values to the child component
  5. The child component (custom component) passes values to the parent component
  6. note

First, the local environment

Native system: Mac applets developer tools: 1.5.7Copy the code

2. Custom Components (sub-components)

Subcomponent: project root directory!! Create a custom component and define the Component properties in the corresponding JSON file

In the root directory of the 'components' directory (directory name custom) to store custom componentsCopy the code

3, page import (parent component import child component)

Parent component: path import is directly used in the usingComponents AXML file defined by adding JSON file under the corresponding page

As shown in figureCopy the code

(figure 3.1)

(figure 3.2)

The parent component (the page that uses the custom component) passes the value to the child component

Subcomponent: pass the value numIndex in the data attribute itemIndex in the lifecycle didMount modify the corresponding value

Figure subcomponentCopy the code

(figure 4.1)

4.2 ⚠️⚠️ The child component can then call the method passed in, passing the parameters to the corresponding method of the parent component, which takes the parameters and modifies the values in its own component

As shown above: props: {onQuantityValue:function(d) {
        console.log('d-----', d) } ... . }... / / directly to invoke the parent component transfer functions of the enclosing props. OnQuantityValue ('The value that the child wants to pass to the parent is assigned here.')

Copy the code

The child component (custom component) passes the value to the parent component

The child component passes a value to the parent through function parameters and the child component passes a function through the props property, but notice ⚠️, the function name must start with on and the parent component passes a method to the corresponding function property

Figure parent componentCopy the code

(figure 5.1)

Figure parent componentCopy the code

(figure 5.2)

note

Step 5 is awkward for a long time because the function name does not start with on!! Can you add another color?! Smile 😊, see here:

Write to oneself essay, have a question welcome to point out