[JavaScript知识库]【微信小程序父子组件传值】

【微信小程序父子组件传值】

父组件传子组件

在父组件的json中设置子组件的路径

{
  "usingComponents": {
    "CompB":"../../components/CompB/CompB"
  } 
}

在父组件中设置自定义属性rmsg

<text>我是父组件</text>
<view>
  <CompB rmsg="{{msg}}"></CompB>
</view>

 data: {
 	//定义父组件的值
    msg:"父组件传子组件",
}

在子组件中接收rmsg

//在子组件接收
<text style="font-size:50rpx;">{{rmsg}}</text>

Component({
  /**
   * 组件的属性列表
   */
  properties: {
    rmsg:{
      type:String,
      value:'默认值'
    },
  },
  // 这种方式不可以传值
  // properties:['rmsg'],

子组件修改父组件

在子组件中设置handler事件

<text style="font-size:50rpx;" bindtap="handler">{{rmsg}}</text>

  methods: {
    handler() {
      // 点击子组件的text标签绑定triggerEvent 自定义一个ehandle事件 并传递参数
      this.triggerEvent('ehandle', '子组件传父组件')
    }
  }

在父组件中设置自定义事件bindehandle

<view>
  <!-- 绑定子组件传递的事件 在定义一个方法change -->
  <CompB rmsg="{{msg}}" arr="{{arrList}}" bindehandle="change"></CompB>
</view>

 change(e){
    console.log(e.detail);
    // 将父组件的数据修改 双向数据绑定给msg
    this.setData({
      msg:e.detail
    })
  },