小程序父子组件通信-传值、父组件调取子组件、子组件调取父组件

最新推荐文章于 2025-07-02 09:59:04 发布

原创最新推荐文章于 2025-07-02 09:59:04 发布 · 2.8w 阅读

10 ·

CC 4.0 BY-SA版权

js 同时被 2 个专栏收录

39 篇文章

订阅专栏

小程序

1 篇文章

订阅专栏

本文介绍了如何在小程序中通过父组件向子组件传递默认值，并利用子组件触发事件返回信息至父组件的过程，以实现日期选择器的交互功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

父组件中
default-value为传递给子组件的值

<x-picker-date id="picker-date" 
default-value="{{newTime}}" wx:if="{{showPicker}}" 
bind:myevent="toggleToast"></x-picker-date>

父组件js

showPickerDate(e) {
  this.setData({ showPicker: true })
  // 调用子组件中methods的onshow方法
  this.selectComponent('#picker-date').onshow()
},
// 获取子组件信息
toggleToast(e){
    console.log(e.detail)
}

子组件js中

properties: {
// 父组件传值
    defaultValue: {
      type: String,
      value: 'default value',
    }
  },
methods: {
    onshow() {
        console.log(this.data.defaultValue)
    },
    // 传递给父组件
    cancelBut: function (e) {
      var that = this;
      var myEventDetail = { pickerShow: false, type: 'cancel' } // detail对象，提供给事件监听函数
      this.triggerEvent('myevent', myEventDetail) //myevent自定义名称事件，父组件中使用
    },
}