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