微信小程序父子组件传值方法详解

一、小标题1：从父组件向子组件传值

在微信小程序中，子组件的属性需要从父组件传递。在父组件中定义一个变量，将它通过属性传递给子组件，即可完成传值。

<!-- 在父组件中 -->
<custom-component value="{{parentValue}}"/>

<!-- 在子组件中 -->
<view>{{value}}</view>

Component({
  properties: {
    value: {
      type: String,
      value: ''
    }
  }
})

在上述代码中，父组件传递了一个变量parentValue给子组件，子组件通过properties接收该值，并渲染在view中。

二、小标题2：从子组件向父组件传值

在微信小程序中，由子组件向父组件传递数据相对复杂，需要使用triggerEvent方法。在子组件中定义一个函数，当触发该函数时，通过triggerEvent调用父组件的事件方法，将数据一起传递给父组件。

<!-- 在父组件中 -->
<custom-component bind:childEvent="childEventHandler" />

<!-- 在子组件中 -->
<button bindtap="tapHandler">传递数据</button>

Component({
  methods: {
    tapHandler: function() {
      this.triggerEvent('childEvent', {childValue: '我是子组件传递的值'});
    }
  }
})

在上述代码中，子组件通过button按钮将childValue的值传递给childEvent事件，父组件调用childEventHandler方法，接收该值并使用。

三、小标题3：依赖注入方式传递数据

除了以上两种方式，也有依赖注入方式传递数据的处理方式。

在微信小程序中，可以使用开发者工具内置的behavior定义一些通用逻辑，例如获取用户信息等，然后让一些相关组件引用它。在这里也可以使用behavior传递数据。

// 定义behavior
module.exports = Behavior({
  behaviors: [],
  properties: {
    value: {
      type: String,
      value: ''
    }
  }
})

// 定义组件
<!-- 在父组件中 -->
<custom-component value="{{parentValue}}"/>

<!-- 在子组件中 -->
<view>{{value}}</view>

Component({
  behaviors: [require('path/to/behavior')],
  properties: {
    value: {
      type: String,
      value: ''
    }
  }
})

在上述代码中，子组件引用了behavior，该behavior的properties中定义了value属性，子组件也定义了value属性，这样当子组件引用该behavior时，自身的value属性将被修改。

四、小标题4：slot插槽传递数据

微信小程序中，使用slot插槽时，可以在插槽中传递数据。

<!-- 在父组件中 -->
<custom-component>
  <template slot="slotName">
    {{parentValue}}
  </template>
</custom-component>

<!-- 在子组件中 -->
<slot name="slotName"></slot>

在上述代码中，父组件通过template在custom-component组件中定义了一个名为slotName的插槽，并在其中传递了一个parentValue值，在子组件中通过slot引用该插槽即可。