親側でイベントが発生するたびに、親コントローラーから子コンポーネントコントローラー関数を呼び出す必要があります。
たとえば
ABCは親コンポーネントで、DCEは子コンポーネントです。この子コンポーネントには、Span ofTextタグとX記号があります。 xをクリックすると、子コントローラーを使用して値がクリアされます。 ABC親コンポーネントにはForm要素があり、子コンポーネントはフォームの1つです。
私の要件は、親コンポーネントボタンがクリックされたときにこの子コンポーネントの値をクリアすることです。
これはここに実際のコードを投稿できないため、試行しているサンプルコードを以下に示します
ParentComponent.cmp
<aura:registerEvent name="clrValues" type="c:ClearValues"/> <div> <c:ChildComponent textValue="test"/> <ui:button label="Save"/> <ui:button label="Clear" press="{!c.clear}"/> </div> </aura:component> ParentController.js
({ clear : function(component, event, helper) { var evtFire = component.getEvent("clrValues"); evtFire.fire(); } }) ClearValues.evt
<aura:event type="APPLICATION" description="Event template" /> ChildComponent.cmp
<aura:component > <aura:handler name="setValues" event="c:ClearValues" action="{!c.clear}"/> <aura:attribute name="textValue" type="String" default="test"/> <div > <ui:inputText label="Expense Name" value="{!v.textValue}" aura:id="input1"/> </div> </aura:component> ChildController.js
({ clear : function(component, event, helper) { helper.clearValues(component,event); } }) コメント
- コードを提供しない限り、あなたを助けるのは難しいです
- Mohitは、元のコードを投稿できないコードを追加しましたが、私が達成しようとしていたことをサンプルに示しました。
回答
子コンポーネントのハンドラー名は、親コンポーネントの登録名と一致している必要があります。つまり、子コンポーネントのハンドラーは次のようになります。
<aura:handler name="clrValues" event="c:ClearValues" action="{!c.clear}"/> -UPDATE-
親子コミュニケーションのより良いアプローチは、ividにリストされている<aura:method>を使用することだと思います= “0911ccb3bc”>
ライトニングドキュメントとここ
これを行うには、でメソッドを定義する必要があります次のような子コンポーネント：
<aura:method name="sampleMethod" action="{!c.clear}" access="PUBLIC"> 次のように親コンポーネント内で参照する場合は、IDが必要です。
<c:ChildComponent textValue="test" aura:id="cComp"/> 次に、親コンポーネントのclearメソッドで、次のように子メソッドを呼び出す必要があります。
var childCmp = component.find("cComp") childCmp.sampleMethod(); コメント
- コンポーネントレベルのイベントにのみ適用され、アプリケーションイベントには適用されません。
- うーん'は本当です。 'これがアプリケーションイベントであることに気づきませんでした。 @Raj_SFDC、なぜ'イベントをコンポーネントイベントにできないのですか？
回答
アプリケーションイベントハンドラーにname属性を含めることはできません。eventとaction<ここで説明したように/ div>属性で十分です。
これは、clearメソッドでアプリケーションイベントを発生させる方法です。
({ clear : function(component, event, helper) { $A.get("e.c:clrValues").fire(); } }) 詳細については、 doc のアプリケーションイベントに関するセクションをご覧ください。
コメント
- それも運が悪いので、親から子のイベントを処理できないと思います。確認してください
- @Raj_SFDC親から子へのアプリケーションイベントを発生させることができます。それでも、間違った処理を行っています。回答を更新しました。確認してください。
- 上から1つ質問があります[$ A.get（" ec：clrValues "）]、属性値を取得する方法。
- イベントパラメータを参照していますか？
$A.get("e.c:clrValues").setParams({'message':'test'})を使用して設定し、イベントを発生させることができる場合は、ハンドラメソッドで値を取り戻します。