小程序组件传值

父传子

<!-- 父组件A wxml -->
<view>
  <componentB paramAtoB='{{paramAtoB}}'></componentB>
</view>

//父组件Ajson （里面不能有注释）

{
  "navigationBarTitleText": "父子传值",
  "usingComponents": {
    "componentB": "../../components/son/son"
  }
}

//父组件A js
// view/father/father.js
Page({
  /**
   * 页面的初始数据
   */
  data: {
    paramAtoB: "我是A向B传值"
  }
})

<!-- 子组件B  wxml -->
<view class="inner">
  {{paramAtoB}}
</view>

//子组件B  js
Component({
  //B在这里接收与data类似可以直接在wxml上用
  properties: {
    paramAtoB: {
      type: String,//类型
      value: 'default value'//默认值
    }
  },
  data: {
    
  }
})

//子组件B json

{
  "component": true,
  "usingComponents": {}
}

image.png

子传父

<!-- 父组件A wxml -->
<view>
  <componentB paramAtoB='{{paramAtoB}}' bind:myevent="onMyEvent"></componentB>
  {{ paramBtoA }}
</view>

// view/father/father.js
Page({

  /**
   * 页面的初始数据
   */
  data: {
    paramAtoB: "我是A向B传值",
    paramBtoA: 1122
  },
  onMyEvent: function (e) {
    //通过事件接收
    this.setData({
      paramBtoA: e.detail.paramBtoA
    })
  }
})

//父组件A json （里面不能有注释）

{
  "navigationBarTitleText": "父子传值",
  "usingComponents": {
    "componentB": "../../components/son/son"
  }
}

<!-- 子组件B  wxml -->
<view class="inner">
  {{paramAtoB}}
  <button bindtap='change'>向A中传入参数</button>
</view>

（注意：子组件的方法需要写在methods：{}里面）

//子组件B  js
Component({
  //B在这里接收与data类似可以直接在wxml上用
  properties: {
    paramAtoB: {
      type: String,//类型
      value: 'default value'//默认值
    }
  },
  data: {
    
  },
  methods: {
    //触发change事件向A传值
    change: function () {
      this.triggerEvent('myevent', { paramBtoA: "666传值成功" });
    }
  }
})

//子组件B json

{
  "component": true,
  "usingComponents": {}
}

原先效果

image.png
点击按钮之后
image.png
转自：https://www.jianshu.com/p/ea830fe470fa

2 dataset 方法

子组件通过 this.data.datase获取
父组件直接加data-des=''{{data}}'' 属性

//组件
<swipers data-id="11" userlist="{{userlist}}"></swipers>

//子组件
![image.png](https://img.haomeiwen.com/i14350612/e323351678e938f1.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

总结
方法一 父组件传递给子组件更像是数据的赋值 字组件数据的改变不会对父组件有影响
方法2 子组件改变父组件传递过来的参数时 会改变父组件的相关数据

监听

Component({

  behaviors: [],

  properties: {
    myProperty: { // 属性名
      type: String, // 类型（必填），目前接受的类型包括：String, Number, Boolean, Object, Array, null（表示任意类型）
      value: '', // 属性初始值（可选），如果未指定则会根据类型选择一个
      observer: function (newVal, oldVal) {
          this._propertyChange(newVal, oldVal);
       } // 属性被改变时执行的函数（可选），也可以写成在methods段中定义的方法名字符串, 如：'_propertyChange'
      
    },
    myProperty2: String // 简化的定义方式
  },
  data: {
    A: [{
      B: 'init data.A[0].B'
    }]
  }, // 私有数据，可用于模版渲染

  lifetimes: {
    // 生命周期函数，可以为函数，或一个在methods段中定义的方法名
    attached: function () { },
    moved: function () { },
    detached: function () { },
  },

  // 生命周期函数，可以为函数，或一个在methods段中定义的方法名
  attached: function () { }, // 此处attached的声明会被lifetimes字段中的声明覆盖
  ready: function() { },

  pageLifetimes: {
    // 组件所在页面的生命周期函数
    show: function () { },
  },

  methods: {
    onMyButtonTap: function () {
      this.setData({
        // 更新属性和数据的方法与更新页面数据的方法类似
        myProperty: 'Test'
      })
    },
    _myPrivateMethod: function () {
      // 内部方法建议以下划线开头
      this.replaceDataOnPath(['A', 0, 'B'], 'myPrivateData') // 这里将 data.A[0].B 设为 'myPrivateData'
      this.applyDataUpdates()
    },
    _propertyChange: function (newVal, oldVal) {
        console.log(newVal);
        console.log(oldVal);
    }
  }

})

转自：http://caibaojian.com/app-components.html