当前位置: 首页 > 工具软件 > Riot > 使用案例 >

riot中子组件与父组件如何传值

范轶
2023-12-01

riot中父组件向子组件传值:通过opts(相当于react中的props)
比如:
在equipments-group.tag中有这样一个room-tree的tag:

<equipments-group>
	<room-tree name="equipments-group">
		...
	</room-tree>
</equipments-group>

那么在room-tree.tag中通过this.props.name,可以输出equipments-group。
那么子组件如何修改父组件中的值呢?
简单的情况下:

<equipments-group>
	 <room-tree
	    name="equipments-group"
	    setflag="{changeDataReturnFlag}"
	>
</equipments-group>
self.returnDatas = {
   userData: false,
    deptData: false,
    tagData: false
}
self.changeDataReturnFlag = function(subData, boolean) {
	self.returnDatas[subData] = boolean
}

那么在子组件中,可以操作父组件中的方法,进而改变父组件的值。

self.opts.setflag('deptData', false);

这样就更改了父组件中的中的returnDatas值了。
在room-tree中,如何想让equipments-group这一tag中的isRoomActive设置为true,当然也可以通过this.parent,如果层级比较深的话是this.parent.parent…(不建议这么做)可以通过Observable中trigger与on事件。

store.equipmentsGroup.trigger('activeTreeItem', {
    isRoomActive: true,
    statusToken: 0
});

那么在equipments-group中通过on事件,每次子组件修改父组件的值时,父组件会及时监听到及时地修改自己的状态。

store.equipmentsGroup.on('activeTreeItem', function (data) {
    self.update({
        isRoomActive: data.isRoomActive
    });
});

同样equipments中包括equipments-group:

<equipments>
	<equipments-group>
		......
	</equipments-group>
</equipments>

那么在equipments中通过可以更改自己的statusToken属性。

store.equipmentsGroup.on('activeTreeItem', function (data) {
   self.update({
       statusToken: data.statusToken
   });
});
 类似资料: