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

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

1. 父组件向子组件传值

1.1 父组件写法

• 首先在父组件的 json 文件中定义子组件

  {
      "usingComponents": {
          "StepDevice": "/components/StepDevice/StepDevice"
      }
  }
  

• 之后在wxml中使用 定义的组件

  注意: stepNum 会在子组件中使用, 获取数据

  <StepDevice stepNum="{{item.shopNum}}"/>
  

1.2 子组件写法

• 子组件规定的写法

  子组件中 获取定义的数据使用 this.properties.stepNum
  子组件改变数据的写法this.setData({stepNum: 2 })

Component({
	properties:{
		stepNum: {
			type: Number,
			value: 1
		}
	},
	// 子组件的生命周期函数
	lifetimes: {
        // 在组件实例进入页面节点树时执行
        attached: function () {
            console.log(this.properties.stepNum)
        },
    },
})

2. 子组件向父组件传值

2.1 子组件的写法

• 首先 如果向父组件传值使用到的固定写法this.triggerEvent('父组件定义的事件名称',{传递的数据})
• 也是在事件触发的时候向父组件传递数据

  <!-- 子组件的写法 -->
  <text class="add-btn" bindtap="addBtn">+</text>
  <!-- 父组件 -->
  <StepDevice bind:changeStepNum="stepChange"/>
  <!-- stepChange 为父组件用来获取子组件的数据的方法 -->
  

• 方法

  this.triggerEvent('父组件定义的事件名称',{传递的数据}) 父组件定义的事件名称就是 bind 绑定的事件名称这里的就是changeStepNum

  Component({
  	properties: {
          stepNum: {
              type: Number,
              value: 1
          }
      },
      methods:{
      	// 给父组件传值
          stepChange() {
              this.triggerEvent("changeStepNum", {
                  stepNum: this.properties.stepNum
              })
          },
          // 每次点击的时候就把 数据传递给父组件
          addBtn() {
              this.stepChange()
          }
  	 }
  })
  

2.2 父组件的写法

• stepChange 为父组件用来获取子组件的数据的方法

  <!-- 父组件 -->
  <StepDevice bind:changeStepNum="stepChange"/>
  <!-- stepChange 为父组件用来获取子组件的数据的方法 -->
  

• 获取数据

  数据保存在 e.detail中

  stepChange(e) {
     const getStepNum = e.detail.stepNum
      console.log(getStepNum)
  },