微信小程序的组件传输

微信小程序中，子组件向父组件传递数据的方式主要有两种，具体流程如下：

方法一：使用自定义事件

1. 在子组件中定义一个自定义事件，并在事件中发送数据。

// 子组件 MyComponent.js

Component({
  methods: {
    onBtnClick() {
      const data = { name: 'Tom', age: 18 };
      this.triggerEvent('myevent', data); // 触发自定义事件并发送数据
    }
  }
})

2. 在父组件的.wxml文件中引入子组件，并绑定子组件的自定义事件。

<!-- 父组件 MyPage.wxml -->

<my-component bind:myevent="onMyEvent"></my-component>

3. 在父组件的.js文件中定义一个事件处理函数，用于接收子组件传递的数据。

// 父组件 MyPage.js

Page({
  onMyEvent(event) {
    const data = event.detail; // 获取子组件传递的数据
    console.log(data);
    // 输出：{ name: 'Tom', age: 18 }
  }
})

注意：子组件通过 this.triggerEvent() 触发自定义事件时，可以传递一个对象作为参数，这个参数将会作为事件的 detail 属性被传递到父组件的事件处理函数中。

方法二：通过依赖注入方式

1. 在子组件中通过 wx.getStorageSync() 读取需要共享的数据，并且通过 this.properties 记录下来。

// 子组件 MyComponent.js

Component({
  properties: {
    name: String, // 父组件传入的 name 属性
  },
  
  attached() {
    const age = wx.getStorageSync('age'); // 通过 wx.getStorageSync() 读取 age 数据
    this.properties.age = age; // 将 age 数据保存到 properties 中
  }
})

2. 在父组件的.wxml文件中引入子组件，并在引入时传递共享数据。

<!-- 父组件 MyPage.wxml -->

<my-component name="Tom"></my-component>

3. 父组件和子组件共享同一个缓存数据，子组件可以通过 this.properties 访问到缓存中的数据。

// 父组件 MyPage.js

Page({
  onLoad() {
    wx.setStorageSync('age', 18); // 在父组件中设置年龄数据到缓存中
  }
})

// 子组件 MyComponent.js

Component({
  properties: {
    name: String, // 父组件传入的 name 属性
    age: Number, // 缓存中获取的 age 数据
  }
})

以上两种方法都可以用于子组件向父组件传递数据，具体选择哪种方式可以根据实际场景和业务需求进行选择。