微信小程序父子传参

父传子:

在你的父文件夹下的.json文件下引入子组件

{
  "usingComponents": {
    "music": "../../component/music/music" 
/*这是定义的组件名字*/   /*这是我子组件的路径*/
  }
}

然后在父组件里 以标签的形式写入子组件,传值的话在标签上自定义属性名,属性值要以双花括号保住

<music list='{{list}}'></music>

然后在子组件中使用Component构造器,他在Page外面使用

Component构造器可用于定义组件,调用Component构造器时可以指定组件的属性、数据、方法等。

 在Component的properties中接收父组件传过来的数据

Component({ 
  properties: {
    list: {            // 属性名
      type: Object,     // 类型(必填),目前接受的类型包括:String, Number, Boolean, Object, Array, null(表示任意类型)
      value: '标题'     // 属性初始值(可选),如果未指定则会根据类型选择一个
    }
  }
})

这样子组件就能接受的父组件传过来的值了在子组件的wxml中用双花括号引用就ok了

子传父运用了triggerEvent()

 this.triggerEvent("up",res)  //第一个是自定义事件名,第二个是要传递的值(可以为空)

然后在父组件中的子组件标签中绑定自定义事件

    <music
         id='music'
         list='{{list}}'
         bind:up="_up" 
            >
    </music>

在父组件中的js文件里获取子组件传过来的值,这里的自定义方法要写在Component构造器中的methods里,因为我写在Page中他不会被触发,所以我就试了下他会在Component中被触发

 methods: {
    _up(e) { //e为子组件传过来的值
      console.log(e.detail.data)
      this.setData({
        list: e.detail.data //这里是改变Page中data上的值
      })
    }
  }

好了组件通信到此完毕,请大家多多关照!

  • 0
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值