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

简单描述

小程序父子组件之间传值和vue的类似，不同的是父传子时子组件是通过properties属性来接收的，子传父则是通过triggerEvent方法触发父组件方法实现传值的

父传子

父组件json文件注册使用的子组件

  "usingComponents": {
    "son": "../../components/son/index"
  }

父组件使用子组件

<view>this is 父组件</view>
<son fatherMsg="{{ fatherMsg }}"></son>

  data: {
    fatherMsg: "我是父组件的数据"
  }

子组件结构

<view>我是子组件</view>
<view>{{ fatherMsg }}</view>

子组件在Component({properties})中接收父组件传过来的值

  properties: {
    // 简化定义方式
    fatherMsg: String
    // 对象定义方式
    // fatherMsg: {
    //   type: String,
    //   value: ''
    // }
  }

页面效果

子传父

子组件通过triggerEvent触发父组件事件
子组件结构

<view>我是子组件</view>
<view bindtap="changeMsg">{{ fatherMsg }}</view>

子组件触发父组件的changeMsg自定义事件

  methods: {
    changeMsg () {
      this.triggerEvent('changeMsg', '改变后的值')
    }
  }

父组件自定义事件

<view>this is 父组件</view>
<son fatherMsg="{{ fatherMsg }}" bind:changeMsg="changeMsg"></son>

父组件通过事件对象的detail属性接收传过来的值

  methods: {
    changeMsg (e) {
      this.setData({
        fatherMsg: e.detail
      })
    }
  }

效果