小程序之父子组件通信

1 父组件向子组件传递数据:
1.1 在父组件的文件夹中的.json文件下引入子组件
{
“usingComponents”: {
//“Tab” 是自己定义的组件名称
//“…/…/components/Tab/Tab” 是组件的路径
“Tab”:“…/…/components/Tab/Tab”
}
}
1.2 在父组件里以标签的形式写入子组件
如果需要传值的话,在标签上自定义属性名,属性值要以双花括号保住

1 子组件是通过properties来获取父组件传递的数据,接着子组件把这个数据当成是data中的数据使用即可

Component({
/**

  • 组件的属性列表
    */
    properties: {
    tabs:{
    type:Array, //要接收的数据类型
    value:[] //默认值(可选)
    }
    }
    })

2 子组件向父组件传递数据:
子组件中监听方法:

+1
``
子组件中发送事件:

methods: {
    handleTap(){
      //三个参数:方法名称,数据,选项
      this.triggerEvent("increment",{index:0})
    }
  }

父组件页面中使用bind监听该方法:

<Tab tabs="{{tabs}}" 
     bind:increment="handleIncrement">
</Tab>

父组件方法使用:

handleIncrement(e){
	//e.detail中就是子组件传递的数据
    this.setData({
      count:this.data.count +1
    })
  }
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值