526互联

微信小程序中子父组件相互传值

发布时间 2023-10-31 12:06:39作者: 土小狗

父传子:

  • 父组件向子组件传递数据可以通过在子组件标签上绑定属性进行

1.在父组件的wxml文件中使用子组件，并为其绑定一个自定义属性,其中custom-data是自定义的属性名，dataFromParent是父组件中的数据

<!--父组件wxml-->
<child-component custom-data="{{dataFromParent}}"></child-component>

2.在子组件的js文件中通过properties字段声明要接收的属性,这里声明了一个名为customData的属性，并指定了其类型为String，初始值为空字符串。

// 子组件js
Component({
  properties: {
    customData: {
      type: String,
      value: ''
    }
  },
  // ...
})

3.在子组件的wxml文件中使用customData属性，这里直接显示customData属性对应的值。这样，在父组件中修改dataFromParent的值后，子组件中的customData属性也会随之更新。

<!-- 子组件wxml -->
<view>{{customData}}</view>

子传父:

  • 子组件向父组件传递数据可以通过自定义事件来实现

1.在子组件中通过triggerEvent方法触发一个自定义事件，并将数据作为参数传递给父组件,这里在点击按钮后触发了一个名为myevent的自定义事件，并将data作为参数传递给了父组件

// 子组件js
Component({
  // ...
  methods: {
    onTapBtn() {
      const data = 'hi, parent'
      this.triggerEvent('myevent', {data})
    }
  }
})

2.在父组件中使用子组件时，绑定要接收事件的函数，并在该函数中获取传递过来的数据，这里在子组件上绑定了myevent事件，并指定其对应的处理函数为onMyEvent。当子组件触发自定义事件后，父组件中的onMyEvent函数会被调用，并且可以通过event.detail获取到传递过来的数据。

<!-- 父组件wxml -->
<child-component bind:myevent="onMyEvent"></child-component>
// 父组件js
Page({
  onMyEvent(event) {
    console.log(event.detail.data) // 输出 hello parent
  }
})```