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