微信小程序中的父子组件通信（详细）

父组件向子组件传参

首先定义子组件  微信小程序中定义组件 

一般我们定义在components文件中 在app.json中 创建

 "pages": [

        "pages/login/login",

        "pages/home/home",

        "pages/orderform/orderform",

        "pages/mine/mine",

        "components/dt-scroll-y/dt-scroll-y",

        "components/choiceimg/choiceimg",

        "components/checkimg/checkimg"

    ],

之后在父组件中引入子组件  首先在父组件的json中直接引入 

.json

"usingComponents": {

        "choiceimg":"/components/checkimg/checkimg"

    }

在wxml页面中使用双标签 <choiceimg></choiceimg>

后在子组件的json中设置

choiceimg.json

{

    "component": true

}

这样组件引用完成；

父传子：

父组件中有个数据lookimgdata  定义为imgdata传递给子组件；

<choiceimg imgdata="{{lookimgdata}}"  ></choiceimg>

 子组件在 .js文件中接收

Component({
    properties: {
        imgdata:{
            type:Object,
        },
    },
    methods:{
        
    },
    /**
     * 页面的初始数据
     */
    data: {

    },
   
})

子组件js中必须是Component  接收数据在

properties: {

        imgdata:{

            type:Object,

        },

    },

使用数据   js中直接  this.data.imgdata  wxml页面中就{{imgdata}} 

 子传父：

在子组件中定义了事件；

<view class="choiceimg_list">

        <view class="choiceimg_btn1" bindtap="getclose">关闭</view>

 </view>

 

methods:{

        getclose(){

            console.log(this.data.imgdata,'111');

            this.triggerEvent('close',this.data.imgdata.id);

        },        

    },

 this.triggerEvent 是固定语句  参数中 第一个参数为传递的方法名 就是在父组件中接收的方法名   第二个参数就是携带的数据；

父组件接收方法

<choiceimg  bindclose="getclose" ></choiceimg>

bindclose ： bind是固定的  后面跟的就是子组件中定义的方法名close  连起来 就 bindclose

getclose(e){

        console.log(e)

    },

 携带的参数就在e里面；

这样就可以完美的父子组件通信了！！！  如有不全还望大佬们进行补全！！！