Vue は、一般的なフロントエンド フレームワークとして、多くの場合、コンポーネント間の値転送関数を実装する必要があります。このうち、隣接するコンポーネントの値を転送する場合は、主にコンポーネントのメソッドを呼び出すことで実現されます。この記事では、Vueにおける隣接成分値伝達関数の実装方法を紹介します。
1. 親コンポーネントが子コンポーネントに値を渡す
Vue では、親コンポーネントの値は v-bind ディレクティブを通じて子コンポーネントにバインドされます。具体的な実装コードは次のとおりです。
親コンポーネント内:
子コンポーネント内:
{{data}}
上記のコードは、親コンポーネント ## のデータを渡します。 #parentDatav-bind:data
子コンポーネントの
data属性にバインドします。
$emitメソッドを通じて親コンポーネントにイベントを送信する必要があります。親コンポーネントにイベントを登録し、子コンポーネントから送信されたデータをコールバック関数で処理します。具体的な実装コードは次のとおりです。
を渡します。 v-on:clicksendDataToParent
メソッドをバインドし、メソッド内で
$emitメソッド
send-dataを介して親コンポーネントにイベントを送信します。データを渡します
Hello, Parent !。親コンポーネントで、イベント
send-dataのコールバック関数
handleChildDataを
v-on:send-data経由で登録し、子の返却処理を行います。関数パラメータのコンポーネント。
{{data}}
update-dataを親コンポーネントに送信し、データ
Hello, Brother 2!を渡します。親コンポーネントはイベント
をリッスンします。 v-on:update-dataを実行し、関数内のデータ
handleBrotherDataを処理し、
v-bind を通じて処理されたデータをサブコンポーネント 2 のdata
にバインドします。プロパティ内のデータ。
以上がVueドキュメントでの隣接成分値伝達関数の実装方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。