在微信小程序中，组件化开发是一种重要的开发模式，它能够将复杂的界面拆分成多个独立的组件，使代码更容易维护和扩展。在组件化的开发中，父子组件之间的相互调用和传参是常见的需求。本文将详细说明微信小程序中父子组件相互调用传参的原理、方法和注意事项，并通过示例进行演示。

一、父子组件相互调用的原理

微信小程序中的组件调用是通过页面路由和组件化模型（XML+JSON+JS）的方式实现的。在一个小程序项目中，顶层页面可以看作是根组件，其他页面可以看作是根组件的子组件。通过页面路由，我们可以实现不同页面的跳转和数据的传递。通过组件化模型，我们可以将页面的布局和逻辑分离，实现组件的复用和扩展。

在父子组件的相互调用中，主要涉及到以下几个关键点：

页面的跳转：通过wx.navigateTo或wx.redirectTo方法可以实现页面之间的跳转。

数据的传递：通过页面路由的参数或者组件的事件可以实现数据的传递。

组件的嵌套：通过XML的嵌套关系可以将一个组件嵌套在另一个组件中。

二、父组件向子组件传递参数

在父组件中向子组件传递参数，可以通过页面路由的参数实现。具体的步骤如下：

1.在父组件的JSON文件中定义需要传递的参数，例如：

{
  "usingComponents": {},
  "globalData": {
    "param1": "Hello",
    "param2": "World"
  }
}

2.在父组件的XML文件中定义子组件，并将需要传递的参数作为属性传递给子组件，例如：

<view>
  <child-component param1="{{param1}}" param2="{{param2}}"></child-component>
</view>

3.在子组件的JS文件中定义接收参数的方法，例如：

Component({
  properties: {
    param1: {
      type: String,
      value: ''
    },
    param2: {
      type: String,
      value: ''
    }
  },
  onLoad: function() {
    this.setData({
      param1: this.data.param1,
      param2: this.data.param2
    })
  }
})

在上述示例中，父组件通过页面路由的参数将param1和param2传递给了子组件。子组件在onLoad方法中接收参数，并将其存储在自身的data对象中，以便后续使用。

三、子组件向父组件传递参数

在子组件中向父组件传递参数，可以通过触发父组件的事件实现。具体的步骤如下：

1.在子组件的JS文件中定义需要传递的数据，例如：

Component({
  data: {
    childParam1: 'Hello',
    childParam2: 'World'
  },
  onLoad: function() {
    this.setData({ childParam1: 'Changed' }) // 这里仅作演示，可以根据实际需要修改数据。
  },
  onButtonClick: function() {
    this.triggerEvent('change', { childParam1: this.data.childParam1, childParam2: this.data.childParam2 }) // 触发名为 'change' 的事件，并传递参数。
  }
})

2.在父组件的XML文件中定义子组件，并监听子组件触发的事件，例如：

<view>
  <child-component bindchange="parentHandler"></child-component>
</view>

3.在父组件的JS文件中定义事件处理函数，接收子组件传递的数据，例如：

Page({
  parentHandler: function(e) {
    console.log(e.detail) // 输出子组件传递的数据。这里会输出 { childParam1: 'Changed', childParam2: 'World' }。
  }
})

在上述示例中，子组件通过触发名为change的事件，将childParam1和childParam2传递给了父组件。父组件在事件处理函数中接收参数，并输出到控制台。需要注意的是，在触发事件时，需要使用this.triggerEvent方法来触发事件，并将数据作为第二个参数传递。事件的名称可以通过字符串指定，事件处理函数需要在父组件中定义。