微信小程序 子组件传值给父组件,调用父组件函数

使用场景

当我们父组件调用子组件时候,想要将子组件的参数传递给父组件来进行数据处理或者直接调用父组件的方法。那么我们一起来学习下。


实现路径

  1. 在子组件触发调用addInfo方法,在方法里面声明参数(item),然后通过triggerEvent将参数传给父组件。
  2. 父组件接收调用请求,触发getAddInfo方法,获取子组件传递的参数(item)

实现详细方法

  1. 新建组件,绑定子组件触发的方法。
    子.wxml:
    
    
    子.js:
    addInfo(){
         let item = {title:'测试',money:8,category:'吃饭'}//要传给父组件的参数
         this.triggerEvent('addInfo',item)//通过triggerEvent将参数传给父组件
    },
  2. 父组件.json文件引用子组件。
    父.json:
    
    //usingComponents 组件,add-item:子组件调用名称、“../demo/add”:子组件调用路径
    //注意:子组件最后一个不能加上逗号,否则会报错。
    {
        "component": true,
        "usingComponents": {
            "add-item": "../demo/add"
        }
    }
    
    父.wxml:
    
    
    父.js:
    getAddInfo(e){
        console.log(e.detail)//{title:'测试',money:8,category:'吃饭'} 
    },

你可能感兴趣的:(微信小程序,微信小程序,小程序,前端)