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>

//父组件
<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