小程序父子组件间传值,父传子,子传父

163 阅读1分钟

父传子

父组件

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

//wxml
<view>
	<componentB paramAtoB='{{paramAtoB}}' ></componentB>
</view>

//js
  data: {
    paramAtoB: "我是父向子传的值",
  },

子组件

//wxml
<view>{{paramAtoB}}</view>

//js
  properties: {
    paramAtoB: {
      type: String,//类型
      value: 'default value'//默认值
    },
  },

子传父

子组件

//wxml
<view>
	<button bindtap='change'>向父组件传值</button>
</view>

//js
methods: {
     change: function () {
      this.triggerEvent('myevent', { paramBtoA: "666传值成功" });
    }
  }
  

父组件

//wxml
<view>
	<componentB bind:myevent="onMyEvent"></componentB>
	{{ paramBtoA }}
</view>

//js
data: {
    paramBtoA: "我是子向父传的值",
  },
onMyEvent: function (e) {
    this.setData({
      paramBtoA: e.detail.paramBtoA
    })
  },