微信小程序:组件间的传值_微信小程序triggerevent接受值传递

组件间的传值

子传父

子组件页

使用triggerEvent方法第一个参数为自定义事件名称,第二个想要传递到父页面的值

this.triggerEvent('quitEvent',e.detail.value);

//多个值时
this.triggerEvent("itemChange",{
    types:this.data.types,
    startImagesCount: this.data.startImagesCount,//开始图片数
    endImagesCount:this.data.endImagesCount,//结束图片数
    durationSize:this.data.durationSize,//时长数
    style:this.data.style,//风格
    diyListData:[] //模板数据
})
1
2
3
4
5
6
7
8
9
10
11

父组件页

在父页面通过事件名绑定一个新方法gainedValue

<quit id="quit" bind:quitEvent="gainedValue"></quit>
1

父页面

gainedValue:function(e){
    console.log("子组件传来的值",e.detail);
}
1
2
3

父传子

父组件页

//在子组件标签内使用自定义属性名(car_team)传值
<driver id='driver' car_team="{{DriverImgInfo.car_team}}"> </driver>
1
2

子组件页

Component({
   //属性名放入properties内才能外部修改
   properties: {
   	 car_team:{			//属性名
        type:String,	//类型
        value:"车队"	  //属性初始值
   	 },
   }
})
1
2
3
4
5
6
7
8
9

在子组件的结构页使用花括号引用

 <text>{{car_team}}</text>
1