1# Data Transfer and Processing
2
3
4## props
5
6You can use **props** to declare attributes of a custom component and pass the attributes to the child component. The supported types of **props** include String, Number, Boolean, Array, Object, and Function. Note that a camel case attribute name (**compProp**) should be converted to the kebab case format (**comp-prop**) when you reference the attribute in an external parent component. The following is sample for adding **props** to a custom component and passing the attribute to the child component.
7
8```html
9<!-- comp.hml -->
10<div class="item">
11   <text class="title-style">{{compProp}}</text>
12</div>
13```
14
15```js
16// comp.js
17export default {
18  props: ['compProp'],
19}
20```
21
22```html
23<!-- xxx.hml -->
24<element name='comp' src='../common/component/comp/comp.hml'></element>
25<div class="container">
26   <comp comp-prop="{{title}}"></comp>
27</div>
28```
29
30>  **NOTE**
31>
32>  The name of a custom attribute cannot start with reserved keywords such as **on**, **@**, **on:**, and **grab:**.
33
34### Default Value
35
36You 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.
37
38```html
39<!-- comp.hml -->
40<div class="item">
41   <text class="title-style">{{title}}</text>
42</div>
43```
44
45```js
46// comp.js
47export default {
48  props: {
49    title: {
50      default: 'title',
51    },
52  },
53}
54```
55
56In this example, a **\<text>** component is added to display the title. The title content is a custom attribute, which displays the text specified by a user. If the user has not set a title, the default text will be displayed. Add the attribute when referencing the custom component.
57
58```html
59<!-- xxx.hml -->
60<element name='comp' src='../common/component/comp/comp.hml'></element>
61<div class="container">
62   <comp title="Custom component"></comp>
63</div>
64```
65
66### Unidirectional Value Transfer
67
68Data 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.
69
70```js
71// comp.js
72export default {
73  props: ['defaultCount'],
74  data() {
75    return {
76      count: this.defaultCount,
77    };
78  },
79  onClick() {
80    this.count = this.count + 1;
81  },
82}
83```
84
85### Monitoring Data Changes by **$watch**
86
87To listen for attribute changes in a component, you can use the **$watch** method to add a callback. The following code snippet shows how to use **$watch**:
88
89```js
90// comp.js
91export default {
92  props: ['title'],
93  onInit() {
94    this.$watch('title', 'onPropertyChange');
95  },
96  onPropertyChange(newV, oldV) {
97    console.info('title attribute changed'+ newV + ' ' + oldV)
98  },
99}
100```
101
102
103## computed
104
105To improve the development efficiency, you can use a computed property to pre-process an attribute in a custom component before reading or setting the attribute. In the **computed** field, you can set a getter or setter to be triggered when the attribute is read or written, respectively. The following is an example:
106
107```js
108// comp.js
109export default {
110  props: ['title'],
111  data() {
112    return {
113      objTitle: this.title,
114      time: 'Today',
115    };
116  },
117  computed: {
118    message() {
119      return this.time + ' ' + this.objTitle;
120    },
121    notice: {
122      get() {
123        return this.time;
124      },
125      set(newValue) {
126        this.time = newValue;
127      },
128    },
129  },
130  onClick() {
131    console.info('get click event ' + this.message);
132    this.notice = 'Tomorrow';
133  },
134}
135```
136
137The first computed property **message** has only a getter. The value of **message** changes depending on the **objTitle** value. The getter can only read but cannot set the value (such as **time** defined during initialization in **data**). You need a setter (such as **notice** in the sample code) to set the value of the computed property.
138