• Home
  • Line#
  • Scopes#
  • Navigate#
  • Raw
  • Download
1# Props<a name="ZH-CN_TOPIC_0000001209252183"></a>
2
3自定义组件可以通过props声明属性，父组件通过设置属性向子组件传递参数，props支持类型包括：String，Number，Boolean，Array，Object，Function。camelCase \(驼峰命名法\) 的 prop 名，在外部父组件传递参数时需要使用 kebab-case \(短横线分隔命名\) 形式，即当属性compProp在父组件引用时需要转换为comp-prop。给自定义组件添加props，通过父组件向下传递参数的示例如下：
4
5```
6<!-- comp.hml -->
7<div class="item">
8   <text class="title-style">{{compProp}}</text>
9</div>
10```
11
12```
13// comp.js
14export default {
15  props: ['compProp'],
16}
17```
18
19```
20<!-- xxx.hml -->
21<element name='comp' src='../../common/component/comp/comp.hml'></element>
22<div class="container">
23   <comp comp-prop="{{title}}"></comp>
24</div>
25```
26
27>![](../../public_sys-resources/icon-note.gif) **说明：**
28>自定义属性命名时禁止以on、@、on:、grab: 等保留关键字为开头。
29
30## 添加默认值<a name="zh-cn_topic_0000001173164675_section448655843113"></a>
31
32子组件可以通过固定值default设置默认值，当父组件没有设置该属性时，将使用其默认值。此情况下props属性必须为对象形式，不能用数组形式，示例如下：
33
34```
35<!-- comp.hml -->
36<div class="item">
37   <text class="title-style">{{title}}</text>
38</div>
39```
40
41```
42// comp.js
43export default {
44  props: {
45    title: {
46      default: 'title',
47    },
48  },
49}
50```
51
52本示例中加入了一个text组件显示标题，标题的内容是一个自定义属性，显示用户设置的标题内容，当用户没有设置时显示默认值title。在引用该组件时添加该属性的设置：
53
54```
55<!-- xxx.hml -->
56<element name='comp' src='../../common/component/comp/comp.hml'></element>
57<div class="container">
58   <comp title="自定义组件"></comp>
59</div>
60```
61
62## 数据单向性<a name="zh-cn_topic_0000001173164675_section9681151218247"></a>
63
64父子组件之间数据的传递是单向的，只能从父组件传递给子组件，子组件不能直接修改父组件传递下来的值，可以将props传入的值用data接收后作为默认值，再对data的值进行修改。
65
66```
67// comp.js
68export default {
69  props: ['defaultCount'],
70  data() {
71    return {
72      count: this.defaultCount,
73    };
74  },
75  onClick() {
76    this.count = this.count + 1;
77  },
78}
79```
80
81## $watch 感知数据改变<a name="zh-cn_topic_0000001173164675_section205821113182114"></a>
82
83如果需要观察组件中属性变化，可以通过$watch方法增加属性变化回调。使用方法如下：
84
85```
86// comp.js
87export default {
88  props: ['title'],
89  onInit() {
90    this.$watch('title', 'onPropertyChange');
91  },
92  onPropertyChange(newV, oldV) {
93    console.info('title 属性变化 ' + newV + ' ' + oldV);
94  },
95}
96```
97
98## computed 计算属性<a name="zh-cn_topic_0000001173164675_section1088954011234"></a>
99
100自定义组件中经常需要在读取或设置某个属性时进行预先处理，提高开发效率，此种情况就需要使用computed字段。computed字段中可通过设置属性的getter和setter方法在属性读写的时候进行触发，使用方式如下：
101
102```
103// comp.js
104export default {
105  props: ['title'],
106  data() {
107    return {
108      objTitle: this.title,
109      time: 'Today',
110    };
111  },
112  computed: {
113    message() {
114      return this.time + ' ' + this.objTitle;
115    },
116    notice: {
117      get() {
118        return this.time;
119      },
120      set(newValue) {
121        this.time = newValue;
122      },
123    },
124  },
125  onClick() {
126    console.info('get click event ' + this.message);
127    this.notice = 'Tomorrow';
128  },
129}
130```
131
132这里声明的第一个计算属性message默认只有getter函数，message的值会取决于objTitle的值的变化。getter函数只能读取不能改变设值，当需要赋值给计算属性的时候可以提供一个setter函数，如示例中的notice。
133
134