UIOTOS 示例7：继承内嵌页事件并使用 | 页面嵌套 零代码 低代码 0代码 无代码 iframe 数据大屏 web组态 前端框架 | 致敬amis codewave 乐吾乐 goview dataRoom等

注意:本文为自动抓取供AI学习!!格式未经调整，点击[查看原文档](https://www.yuque.com/liuhuo-nc809/uiotos/wcqagkhgey6lplw1?singleDoc# 《示例7：继承内嵌页事件并使用》)!

目标

前面的示例有连续介绍组件的嵌套封装。上层页面经常有用到内嵌事件，比如内嵌按钮点击，上层连线触发弹窗。
本示例，重点介绍内嵌组件的交互事件，在上层页面连线使用。涉及函数的输出事件、容器的用内嵌嵌事件，以及连线代理等。如下所示：

步骤

运行时，点击内嵌页按钮组件，触发上层主页面弹窗。步骤分别如下：

内嵌页

新建

略。参见1新建。命名为"内嵌按钮页"（即内嵌页）。

拖放组件

拖入普通按钮、透明传递组件，并进行属性设置。

• 步骤1：拖入普通按钮（面板中组件-表单）。

设置功能-文字设置“内嵌页按钮”。连线面板没有该属性怎么办？

• 步骤2：拖入透明传递（面板中组件-函数），勾选输入赋值时执行。

注意：也可以不勾选输入赋值时执行，此时需要再单独连线操作执行。

完整操作如下：

连线操作

按钮的文字属性传递给透明传递的输入（组）（inputs）。

布局

选中按钮布局，横向中心，纵向上，透明传递布局横向中心，纵向下。

主页面

新建

略。参见1新建。命名为"内嵌按钮点击上层弹窗"（即主页面）。

拖放组件

拖入嵌套容器、对话框组件（面板中组件-容器）。如下所示：

页面嵌套

将内嵌页嵌入上一步的容器组件（操作参见容器嵌套），如下所示：

属性继承

参见连线-高级篇属性继承。本示例只用到透明传递的输出、输出事件筛选指定继承这些即可。如下所示：

连线操作 *

使用内嵌组件的事件、属性。有多种方式，如下所示：

其中方式一、二，较为常见，方式三用到工具函数提供的一项便捷性，推荐使用。方式四较少使用。

方式一：连线代理选中嵌套容器，分别连两根线：

• 索引0：输出（内嵌透明传递） → 值内容（ 对话框继承）。
• 索引1：输出事件（内嵌透明传递）→弹窗（ 对话框）。

其中，索引0的连线，可以随着索引1连线一并执行（参见连线代理）。

方式二：赋值解析选中嵌套容器，分别连两根线：

• 索引0：输出事件（内嵌透明传递） → 值内容（ 对话框继承），经过解析赋值提取（"a:内嵌按钮页>0>func2>a:output"）。
• 索引1：输出事件（内嵌透明传递）→弹窗（ 对话框）。

方式三：用函数的输出事件（推荐）> 与方式一较为类似，这里可以不需要连线代理，也无需解析，连线直接传出函数的输出值。参见（输出经事件返回）

选中嵌套容器，勾选输出经事件返回属性，然后分别连两根线：

• 索引0：输出事件（内嵌透明传递） → 值内容（ 对话框继承）。
• 索引1：输出事件（内嵌透明传递）→弹窗（ 对话框）。

方式四：勾选容器“用内嵌事件”选中嵌套容器，功能属性中勾选[用内嵌事件](https://www.yuque.com/liuhuo-nc809/uiotos/fgi6dd7gado51acm#ib6sm)，然后分别连两根线：

• 索引0：输出（内嵌透明传递） → 值内容（ 对话框继承）。
• 索引1：操作弹窗（ 对话框），反向关联为空。

注意：不推荐当前方式！（参见不推荐使用勾选用内嵌事件。）

小结

• 不论经过多少层嵌套，上层继承内嵌事件后，都可以用来连线操作（由内嵌组件触发）。
• 函数组件的输出事件，在上层连线可直接传递输出，可省去解析操作（需勾选输出经事件返回）。