• Home
  • Line#
  • Scopes#
  • Navigate#
  • Raw
  • Download
1# Props<a name="EN-US_TOPIC_0000001162414643"></a>
2
3-   [Default Value](#en-us_topic_0000001059148556_section448655843113)
4-   [Unidirectional Value Transfer](#en-us_topic_0000001059148556_section9681151218247)
5-   [Monitoring Data Changes by $watch](#en-us_topic_0000001059148556_section205821113182114)
6-   [Computed Property](#en-us_topic_0000001059148556_section1088954011234)
7
8You 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. 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. You can add  **props**  to a custom component, and pass the attribute to the child component.
9
10```
11<!-- comp.hml -->
12<div class="item">
13   <text class="title-style">{{compProp}}</text>
14</div>
15```
16
17```
18// comp.js
19export default {
20  props: ['compProp'],
21}
22```
23
24```
25<!-- xxx.hml -->
26<element name='comp' src='../../common/component/comp/comp.hml'></element>
27<div class="container">
28   <comp comp-prop="{{title}}"></comp>
29</div>
30```
31
32## Default Value<a name="en-us_topic_0000001059148556_section448655843113"></a>
33
34You 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.
35
36```
37<!-- comp.hml -->
38<div class="item">
39   <text class="title-style">{{title}}</text>
40</div>
41```
42
43```
44// comp.js
45export default {
46  props: {
47    title: {
48      default: 'title',
49    },
50  },
51}
52```
53
54In 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.
55
56```
57<!-- xxx.hml -->
58<element name='comp' src='../../common/component/comp/comp.hml'></element>
59<div class="container">
60<comp title=" Custom component "></comp>
61</div>
62```
63
64## Unidirectional Value Transfer<a name="en-us_topic_0000001059148556_section9681151218247"></a>
65
66Data 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.
67
68```
69// comp.js
70export default {
71  props: ['defaultCount'],
72  data() {
73    return {
74      count: this.defaultCount,
75    };
76  },
77  onClick() {
78    this.count = this.count + 1;
79  },
80}
81```
82
83## Monitoring Data Changes by  **$watch**<a name="en-us_topic_0000001059148556_section205821113182114"></a>
84
85To 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**:
86
87```
88// comp.js
89export default {
90  props: ['title'],
91  onInit() {
92    this.$watch('title', 'onPropertyChange');
93  },
94  onPropertyChange(newV, oldV) {
95     console.info('title attribute changed'+ newV + ' ' + oldV)
96  },
97}
98```
99
100## Computed Property<a name="en-us_topic_0000001059148556_section1088954011234"></a>
101
102To 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:
103
104```
105// comp.js
106export default {
107  props: ['title'],
108  data() {
109    return {
110      objTitle: this.title,
111      time: 'Today',
112    };
113  },
114  computed: {
115    message() {
116      return this.time + ' ' + this.objTitle;
117    },
118    notice: {
119      get() {
120        return this.time;
121      },
122      set(newValue) {
123        this.time = newValue;
124      },
125    },
126  },
127  onClick() {
128    console.info('get click event ' + this.message);
129    this.notice = 'Tomorrow';
130  },
131}
132```
133
134The 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. You need a setter \(such as  **notice**  in the sample code\) to set the value of the computed property.
135
136