wepy父子组件传值demo（封装了日期选择范围组件，并实现父组件向子组件传值，子组件调用父组件中的方法及父组件调用子组件中的方法）
//封装组件PickerDate 日期范围选择，（此处没有写样式） <style lang="less"> .input-text-height{ font-size: 28rpx; color: #0079B5; padding-left: 30rpx; } </style> <template> <block> <view> {{text}}</view> <view class="supply-picker-box"> <picker mode="date" value="{{startDate}}" bindchange="bindDateStartChange" end='{{time}}'> <view class="picker" style="width: 240rpx"> <text class="input-text-height">{{startDate==""?"起始日期":startDate}}</text> </view> </picker> </view> <text class="supply-select-text">至</text> <view class="supply-picker-box"> <picker mode="date" value="{{endDate}}" bindchange="bindDateEndChange" start='{{startDate}}' end='{{time}}'> <view class="picker" style="width: 240rpx"> <text class="input-text-height">{{endDate==""?"终止日期":endDate}}</text> </view> </picker> </view> </block> </template> <script> import wepy from 'wepy'; import moment from 'moment'; export default class PickerDate extends wepy.component { components = { }; props = { text: { type: String, default: '' }, startDate:{ type: String, twoWay: true }, endDate:{ type: String, twoWay: true } }; data = { selectDate:{ startDate:this.startDate, endDate:this.endDate, }, time:moment() }; computed = {}; watch = { startDate (newValue, oldValue) {//监测父组件中startDate字段变化 console.log(`startDate value: ${oldValue} -> ${newValue}`) } }; methods = { //更改结束时间 bindDateEndChange(e){ this.selectDate.endDate=e.detail.value; this.$apply() this.$emit('endDateChange',e.detail.value) }, //改变开始时间 bindDateStartChange(e){ this.selectDate.startDate=e.detail.value; this.$apply() this.$emit('startDateChange',e.detail.value)//方法1：子组件调用父组件中的方法，把值传给父组件
this.$emit('startDateChange1',e.detail.value)//方法2：子组件也可以直接调用父组件events中的方法，把值传给父组件,父组件可以通过events接受
},
childMethod(e){//子组件中的方法，在父组件中调用
console.log(1211121,e)
}
};
events = {//此处实现的是来接受父组件通过broadcast下发的通知中的数据：
'index-broadcast': (...args) => {
console.log(args) //["我正在测试哈哈哈哈", _class]
//可以通过以下方法拿到子组件名称+拿到数据的事件名称+事件的来源
let $event = args[args.length - 1]
console.log($event)
console.log(`${this.$name} receive ${$event.name} from ${$event.source.$name}`)
}
// 页面卸载 onUnload() { this.selectDate={ startDate:this.startDate, endDate:this.endDate, }; this.$apply(); } // 页面显示 onShow() { } // 页面加载 onLoad(e) { } } </script>
注：通过使用
.sync修饰符来达到父组件数据绑定至子组件的效果，也可以通过设置子组件props的twoWay: true来达到子组件数据绑定至父组件的效果。那如果既使用.sync修饰符，同时子组件props中添加的twoWay: true时，就可以实现数据的双向绑定了。
//父组件 <style lang="less"> </style> <template> <view class="content bofeducation-wrapper"> <PickerDate text="123" :startDate.sync="startDate" :endDate.sync="endDate" @startDateChange.user="startDateChange" @endDateChange.user="endDateChange"></PickerDate> <view @tap="reset">重置</view> </view> </template> <script> import wepy from 'wepy'; import api from '../../api/api'; import Tips from '../../utils/Tips'; import PickerDate from '../../components/pickerDate'; import moment from 'moment'; export default class bureauEducationIndex extends wepy.page { config = { navigationBarTitleText: '首页', backgroundColor: '#f5f5f5', navigationBarBackgroundColor: '#2EBAFF', navigationBarTextStyle: 'white', usingComponents: { 'i-icon': '../../iview/icon/index', 'i-badge': '../../iview/badge/index', }, }; components = { PickerDate:PickerDate }; data = { startDate:moment().format('YYYY-MM-DD'), endDate:moment().format('YYYY-MM-DD'), }; computed = {}; methods = { startDateChange(time){ console.log(time) this.startDate=time; this.$apply(); //此处可以调用方法重新获取数据 }, endDateChange(time){ console.log(time) this.endDate=time; this.$apply(); }, getData(that){ let date = moment().format("YYYY-MM-DD"); //工作日报 api.selWorkBulletinOfDayOfFirstPage({ data:{ time: date } }).then(res => { if (res.status == 0) { } }) }, reset(){ //this.startDate=""; //this.endDate=""; //this.$apply();
this.$invoke('PickerDate','childMethod',111)//调用子组件PickerDate中的方法childMethod，并传入参数111
},
};
events = {
'startDateChange1': (...args) => {
console.log(args)
}
}
onShow() {}
onUnload() {}
onLoad() {
this.$broadcast('index-broadcast', '我正在测试哈哈哈哈')} } </script>
在父组件的某个函数内，向子组件下发了index-broadcast这个通知，如下： this.$broadcast('index-broadcast', '我正在测试哈哈哈哈') 那么在子组件中，可以用这种方法来接受数据： events = { 'index-broadcast': (...args) => { console.log(args) //["我正在测试哈哈哈哈", _class] //可以通过以下方法拿到子组件名称+拿到数据的事件名称+事件的来源 let $event = args[args.length - 1] console.log($event) console.log(`${this.$name} receive ${$event.name} from ${$event.source.$name}`) } }
//1、子组件通过$emit调用父组件中的方法，既可调用到methods中的方法，也可以调用到events中的方法 //2、父组件可以通过$invoke调用子组件中的方法 //3、父组件通过$broadcast(方法名, 通知)向子组件中下发通知，子组件中在events中通过该方法名拿到父组件下发的通知
wepy相关知识点可参考：https://juejin.cn/post/6844903774851432456#heading-4
