微信小程序 - 父子组件之间的传值

  在做项目过程中，我们会把多个相同的模块做成一个组件，然后供多个页面一起使用，这样可以实现组件复用。下面我来说说如何实现小程序中的父子组件之间的传值。

1、父组件向子组件传值

  子组件是通过 properties 来接收父组件传递过来的值

例子：

（1）子组件
  1）wxml文件

<!--wxml文件--> <!--components/button/button.wxml-->

<view class="button-con {
  {type}}">
  <view class='btn-text'>{
  {desc}}</view>
</view>

  2）js文件（通过 properties 接收父组件传递过来的值）

// components/button/button.js
Component({
  /**
   * 组件的属性列表
   */
  properties: {
    type:String,
    desc:String,
  },

  /**
   * 组件的初始数据
   */
  data: {

  },

  /**
   * 组件的方法列表
   */
  methods: {

  },
})

（2）父组件
  1）在json文件中引入子组件（将 component 设置为true，在 usingComponents 中引入对应的子组件）