子コンポーネントでのメソッドのコール

公開メソッドを公開するには、公開メソッドを @api でデコレートします。公開メソッドはコンポーネントの API の一部です。コンテインメント階層の下位と通信するには、オーナーと親コンポーネントは子コンポーネントの JavaScript メソッドをコールします。

次の例では、c-video-player コンポーネントの isPlaying プロパティの getter と play() および pause() メソッドを公開するために、それぞれに @api デコレータを追加しています。このプロパティの読み取りとこのメソッドのコールを実行できるのは、c-video-player を含む親コンポーネントです。JavaScript ファイルを次に示します。

videoUrl は、公開プロパティです。@api デコレータを使用すると、コンポーネントの公開プロパティと公開 JavaScript メソッドを定義できます。公開プロパティは、コンポーネントの公開 API のもう 1 つの部分です。

ここで、ビデオ要素が定義されている HTML ファイルを見てみましょう。

通常、実際のコンポーネントでは、c-video-player がビデオ自体の再生または一時停止を制御します。この例では、公開 API の設計を示すため、公開メソッドをコールする親コンポーネント内に制御があります。

c-method-caller コンポーネントには c-video-player が含まれており、c-video-player の play() および pause() メソッドをコールするボタンがあります。HTML は次のようになります。

c-method-caller の handlePlay および handlePause メソッドをワイヤリングした後、c-method-caller のボタンをクリックすると、c-video-player でビデオが再生または一時停止されます。

c-method-caller 用の JavaScript ファイルを次に示します。

c-method-caller の handlePlay() 関数は c-video-player 要素の play() メソッドをコールします。this.template.querySelector('c-video-player') は methodCaller.html の c-video-player 要素を返します。子コンポーネントにアクセスしてそのコンポーネントのメソッドをコールできるようにするには、this.template.querySelector() コールが便利です。

c-method-caller の handlePause() 関数は c-video-player 要素の pause() メソッドをコールします。

JavaScript メソッドからの値を返すには、return ステートメントを使用します。たとえば、c-video-player の isPlaying() メソッドを参照してください。

データを JavaScript メソッドに渡すには、メソッドに 1 つ以上のパラメータを定義します。たとえば、play() メソッドを定義して、ビデオの再生速度を制御する speed パラメータを設定できます。

querySelector() メソッドは、セレクタに最初に一致した要素を返す標準 DOM API です。

配列を反復処理する場合は、class 値や data-* 値などのその他の属性を要素に追加し、これを使用して目的の要素を選択することを検討してください。

querySelectorAll() メソッドは、DOM 要素の配列を返します。

詳細は、developer.mozilla.org/en-US/docs/Web/API/Element/querySelectorAll および developer.mozilla.org/en-US/docs/Web/API/Element/querySelector を参照してください。

関連トピック

• イベントを使用した通信
• Public のプロパティ
• デコレータ