小程序父子组件传值

首先子组件必须是自定义的组件.不能是page里边创建的页面.
父向子传值
父组件代码






这里是父组件的json文件代码

{
  "component": true,
  "usingComponents":{
    "com1":"../../components/child2/child2"
这里要设置子组件的标签名和子组件的相对路径(复制代码后将此行删除,json文件不能有注释)
  }
}

这里是父组件的js文件代码

Page({
  data: {
    msgAtoB: "这是父向子传递的信息",
  },
  hahaha:function(e){
    this.setData({
      msgBtoA: e.detail.msgBtoA
    })
  }
})

这里是子组件的wxml文件代码


{{msgAtoB}}

这里是子组件的js文件代码

Component({
  properties:{
    msgAtoB:{
      type:String//设置父组件的数据格式
    }
  }
})

子向父传值
父组件wxml代码





{{msgBtoA}}

这里是父组件的json文件代码和之前一样,无改动

这里是父组件的js文件代码

Page({

  /**
   * 页面的初始数据
   */
  data: {
    msgAtoB: "这是父向子传递的信息",
    msgBtoA:"这里接收儿子的信息"
  },
  hahaha:function(e){
    this.setData({
      msgBtoA: e.detail.msgBtoA
    })
  },
})

这里是子组件的wxml文件代码


{{msgAtoB}}

{{msgBtoA}}

这里是子组件的js文件代码

Component({
  properties:{
    msgAtoB:{
      type:String//设置父组件的数据格式
    }
  },
  data:{},
  methods:{
    send:function(){
      this.triggerEvent("myevent", { msgBtoA:"儿子的信息传过来了"})
    }
  },

})

你可能感兴趣的:(小程序父子组件传值)