javascript - 访问 Lightning 组件内项目的子项

Question

我的闪电组件设置如下:

<aura:component >
<aura:attribute name="opts" type="List" default="['Tyler Dahle','Molly Demouser','Penny Demouser', 'Ted Demouser']"/>
<lightning:tabset aura:id="tabBar" variant="scoped" selectedTabId="none">
    <lightning:tab aura:id="ownerTab">
        <aura:set attribute="label">
            <lightning:icon iconName="utility:groups"/>
        </aura:set>
        <lightning:select name="users" label="Select Users/Groups/Resources:">
            <aura:iteration items="{!v.opts}" var="option">
                <option>{!option}</option>
            </aura:iteration>
        </lightning:select>
        <lightning:input type="checkbox" label="Enable" name="Enable User Filter" checked="true"/>
        <lightning:button class="closeUser" variant="base" iconName="utility:close" onclick="{!c.closeTabContent}"/>
    </lightning:tab>
  </lightning:tabset>
</aura:component>

然后我在 Visualforce 页面中进行初始化，如下所示:

$Lightning.use("c:filterBar", function(){
                    $Lightning.createComponent("c:userTab", {label: ""}, "filterTabStrip");    
                });

它会显示出来，我可以点击我的选项卡和所有内容。但是，我的选项卡内容中显示了带有“x”的按钮。当用户单击此按钮时，我希望选项卡内容再次关闭，因为现在，一旦您打开选项卡，选项卡将始终打开。

我尝试在 Controller 中使用 component.find('ownerTab') ，但返回未定义。 component.find('tabBar') 返回一个选项卡栏，然后我可以在选项卡栏上执行 .get('selectedTabId') 并返回正确的 Id，但我不知道如何找到该选项卡，然后在单击“x”时将其类设置为“slds-tabs--scoped__content slds-hide”(我刚刚列出的类是为 html 页面中的内容指定的类，其中“隐藏”更改为“显示”)显示内容)。

所以我很想知道如何从 Controller 访问选项卡(不是选项卡集，而是选项卡)，以及如何关闭内容。一旦我弄清楚如何访问该选项卡，我将尝试更改它的类，但我有一种感觉，这是行不通的......

感谢您的帮助!

Answer 1

一旦您导航到其他组件，您就没有直接通信链接，

1. 为了在 aura:components 之间进行通信，我们使用 aura:events
2. 为了在 aura:component 和 vf 页面之间进行通信，我们需要使用 postmessage javascript 函数和事件监听器来处理这些消息。