许久不写简书了，还是慢慢写吧，尽量去点记录，尽量去分享。
自定义组件有非常高的灵活行，就算不能提出优秀的公共组件，自定义组件也有它的用处，减小单文件代码体积。
能更清晰地区看代码，有时候说函数名是最好的注释，有时候文件名也是比较好的注释。
整如下图，我把首付和月供提为一个简单组件，为什么要抽提为一个组件呢？1.因为这是产品详情页面，会集成较多的功能，选购规格，优惠情况，限购情况等等。后台的数据中并无首付和月供字段，需要在前台处理，这样这个js文件的体积就会加大。有人可能会说这样的值应该后台传来啊，怎么会在前台处理呢？我说有一种开发叫维护开发，如果后台后期维护中不断往数据表中添加新字段，可能会导致不必要的冗余，也可能会导致数据维护成本提高。总的来说还是业务主要路线，技术为支撑，能新建表解决的问题，不去扩展原有数据库字段。2.随着业务的不断进展，我们可能会需要不同的的产品详情页。废话这么堆，自我的业务记录。
要实现的功能就是把价格传到子组件中计算为月供和首付显示。
父组件的json中写入，需要引入的组件，可以引入多个。prices-first-month为在父组件中使用的标签名，可以随意定义，后面的路径为为子组件所在的路径。
"usingComponents": {
"prices-first-month": "/pages/ymyadd/component/prices/index"
}
在父级组件的wxml文件中,goods-prices为子组件中的属性。
<prices-first-month class="protext" goods-prices="{{PriceShow}}"></prices-first-month>
在子组件js文件中,继承父级样式和接收属性，当父级改变属性值时触发属性中observer，切记在observer中不要对属性本身进行修改，包括数据类型都不要修改，否则会进入递归调用该方法，最终导致奔溃。
externalClasses表示要继承的样式
/**
* 组件的属性列表
*/
externalClasses: ['protext'],
properties: {
goodsPrices:{
type: Number,
value: 0,
observer (newVal, oldVal, changePath) {
console.log(newVal, oldVal, changePath)
}
}
},
在最新的2.6.1版本中提倡使用observers进行监听属性的改变，注意可以监听properties和data的属性，observers是属于Component方法下的属性，可能有朋友对这句话不太理解，没关系，就把observer写和data同级即可。当然达到这种效果也可以使用组件的生命周期函数，注意，自定义组件的生命周期函数和page的不太一样。
data: {
firstPay: 0,
monthPay: 0,
interest: 0,
repayPeriod: 36, /**还款期数 */
bankRatio: 0.126, /**银行利率 */
loanRatio: 0.8, /**首付比率 */
},
/**
* 组件的方法列表
*/
observers: {
'goodsPrices': function (goodsPrices) {
console.log("Component下的observers监听触发", goodsPrices)
let loanMoney = goodsPrices*this.data.loanRatio
let interest = loanMoney * this.data.bankRatio
let monthPay = Math.ceil((loanMoney + interest)/this.data.repayPeriod)
this.setData({
firstPay: goodsPrices - loanMoney,
monthPay
})
}
},
子级组件的 wxml
<!--pages/ymyadd/component/prices/index.wxml-->
<view class="prices-box">
<view class="prices-item">
<text>首付:</text>
<text>{{firstPay}}</text>
</view>
<view class="prices-item month-pay">
<text>月供:</text>
<text>{{monthPay}}</text>
</view>
</view>
子组件文件的json
{
"component": true,
"usingComponents": {}
}
