• Home
  • Line#
  • Scopes#
  • Navigate#
  • Raw
  • Download
1# Props
2
3
4You can use **props** to declare attributes of a custom component. The attributes can be used by a parent component to pass parameters to a child component. An example will be provided below to show you how to pass parameters through the parent component.
5
6## Default Value
7
8You can set the default value for a child component attribute via **default**. The default value is used if the parent component does not have **default** set. In this case, the **props** attribute must be in object format instead of an array.
9
10
11
12```html
13<!-- comp.hml -->
14<div class="container">
15    <div class="row-1">
16        <div class="box-1">
17            <text>xiaoziti</text>
18        </div>
19        <div class="box-2">
20            <text>{{text}}</text>
21        </div>
22        <div class="box-3">
23            <text>{{textdata[0]}}</text>
24        </div>
25    </div>
26    <div class="row-2" if="true">
27        <button value="{{progress}}"></button>
28    </div>
29    <div class="row-3" if="true">
30        <button onclick="buttonClicked" value="click"></button>
31    </div>
32</div>
33```
34
35
36
37```json
38{
39  "data": {
40    "progress": {
41      "default": "80"
42    }
43  },
44  "props": {
45    "textdata": {
46      "default": ["a","b"]
47    },
48    "progress": {
49      "default": 60
50    },
51    "text": {
52      "default": "ha"
53    }
54  },
55  "actions": {
56    "buttonClicked": {
57      "action": "proxy",
58      "method": "event_1"
59    }
60  }
61}
62```
63
64
65
66```html
67<!-- xxx.hml -->
68<element name='comp' src='../../common/customComponent/customComponent.hml'></element>
69
70<div class="container">
71    <comp progress="{{clicknow}}" textdata="{{texts}}" if="false" @event_1="click"></comp>
72</div>
73```
74
75
76## Unidirectional Value Transfer
77
78Data can be transferred only from the parent component to child components. You are not allowed to change the value passed to the child component. However, you can receive the value passed by **props** as a default value in **data**, and then change the **data** value.
79