1# 数据传递与处理 2 3 4## Props 5 6自定义组件可以通过props声明属性，父组件通过设置属性向子组件传递参数，props支持类型包括：String，Number，Boolean，Array，Object，Function。camelCase (驼峰命名法) 的 prop 名，在外部父组件传递参数时需要使用 kebab-case (短横线分隔命名) 形式，即当属性compProp在父组件引用时需要转换为comp-prop。给自定义组件添加props，通过父组件向下传递参数的示例如下： 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> **说明：** 31> 32> 自定义属性命名时禁止以on、@、on:、grab: 等保留关键字为开头。 33 34### 添加默认值 35 36子组件可以通过固定值default设置默认值，当父组件没有设置该属性时，将使用其默认值。此情况下props属性必须为对象形式，不能用数组形式，示例如下： 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 56本示例中加入了一个text组件显示标题，标题的内容是一个自定义属性，显示用户设置的标题内容，当用户没有设置时显示默认值title。在引用该组件时添加该属性的设置： 57 58```html 59<!-- xxx.hml --> 60<element name='comp' src='../common/component/comp/comp.hml'></element> 61<div class="container"> 62 <comp title="自定义组件"></comp> 63</div> 64``` 65 66### 数据单向性 67 68父子组件之间数据的传递是单向的，只能从父组件传递给子组件，子组件不能直接修改父组件传递下来的值，可以将props传入的值用data接收后作为默认值，再对data的值进行修改。 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### $watch 感知数据改变 86 87如果需要观察组件中属性变化，可以通过$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 属性变化 ' + newV + ' ' + oldV); 98 }, 99} 100``` 101 102 103## computed 104 105自定义组件中经常需要在读取或设置某个属性时进行预先处理，提高开发效率，此种情况就需要使用computed计算属性。computed字段中可通过设置属性的getter和setter方法在属性读写的时候进行触发，使用方式如下： 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 137这里声明的第一个计算属性message默认只有getter函数，message的值会取决于objTitle的值的变化。getter函数只能读取不能改变参数值，例如data中初始化定义的time，当需要赋值给计算属性的时候可以提供一个setter函数，如示例中的notice。