微信小程序组件间传值

一. 微信小程序父组件向子组件传值

1.父组件可以直接传参或者使用数据绑定向子组件动态传递数据
组件在父组件内写法：

<view>
  <!-- 以下是对一个自定义组件的引用 -->
  <my-component inner-text="Some text" numberA='5' numberB='{{dataFieldA}}'></my-component>
</view>

2.子组件

Component({
  properties: {
    // 这里定义了innerText属性，属性值可以在组件使用时指定
    innerText: {
      type: String,
      value: 'default value',
    },
    numberA: {
      type: Number,
      value: 0
    },
    numberB: {
      type: Number,
      value: 0
    }
  },
  data: {
    // 这里是一些组件内部数据
  },
  methods: {
    // 这里是一个自定义方法
  }
})

3.然后在子组件js的this.properties.innerText.value就可以访问到父组件传进的dataField的值，或者wxml中直接按照data的使用方式{{propname}}来使用

 

二. 微信小程序子组件向父组件传值

1.子组件在需要传值时，使用triggerEvent传给父组件一个事件( myevent ），并传递想要给父组件的值( sonParam )

this.triggerEvent('myevent', {sonParam: false})

2. 在父组件中，子组件的引用处，通过这个myevent事件绑定一个方法( onMyEvent )

<customSelector bind:myevent="onMyEvent">

3.在父组件的js中，定义这个方法onMyEvent，在这个方法内就可以获取到子组件传递过来的值了

onMyEvent: function(e) {
    let sonParam = e.detail.sonParam
}

三. 微信小程序父组件调用子组件的方法

1.在子组件的里的methods里定义一个方法

// components/header/header.js
Component({
  properties: {
  },
  data: {},
  methods: {
    getrun() {
      console.log('我是子组件的方法')
    },
  }
})

2.在父组件的调用里定义一个id唯一标识
按钮用来获取子组件的方法

<header id="header"></header>
<button bindtap="getson">获取子组件的方法</button>

  getson() {
    var header = this.selectComponent("#header")
    console.log(header.data) //子组件的数据
    header.getrun() //子组件的方法
  },