[編成と共有] Vue 親コンポーネントが子コンポーネントを呼び出すための一般的なメソッドとテクニック

Vue 開発では、通常、親コンポーネントで子コンポーネントを呼び出す必要がある状況に遭遇します。この場合、このタスクを正しく完了するには、いくつかの基本的な知識ポイントを習得する必要があります。

この記事では、Vue の親コンポーネントが子コンポーネントを呼び出す機能を実装するための一般的なメソッドとテクニックをいくつか紹介します。

1. $refs を使用する

Vue では、各コンポーネントに独自の $refs 属性があり、コンポーネントのインスタンス オブジェクトを取得できます。したがって、親コンポーネントの $refs 属性を通じてサブコンポーネントのインスタンス オブジェクトを取得し、それによってサブコンポーネントのメソッドを呼び出したり、サブコンポーネントのプロパティにアクセスしたりできます。

これは、$refs を使用して子コンポーネントを呼び出す方法を示す簡単な例です:

上の例では、親コンポーネント "##" でref="child を使用しています。 #子コンポーネントのインスタンス オブジェクトを取得し、子コンポーネントのメソッドchildMethod()を呼び出します。

v-forを通じて動的に作成される場合、親コンポーネントの$refsを通じてアクセスされるのは配列であることに注意してください。対応するサブコンポーネント インスタンスはインデックスに基づいて選択する必要があります。

$emitメソッドを通じて子コンポーネントのイベントをトリガーできます。子コンポーネントは、これらのイベントをリッスンすることで親コンポーネントと通信できます。

// 子组件   // 父组件  

this.$emit ('my -event', 'hello')は、my-eventという名前のイベントをトリガーし、データhelloを渡します。親コンポーネントは、子コンポーネントに@my-event="handleChildEvent"を追加することでイベントをリッスンし、イベント データを独自のメソッドhandleChildEvent(data)に渡します。

propsプロパティを宣言し、親コンポーネントにデータを渡すことで、詳細なデータ転送を実現することもできます。

$ を使用できます。プロパティを使用して、親コンポーネントのインスタンス オブジェクトを取得します。

// 子组件   // 父组件  

に渡されます。 computed属性でthis.$parent.messageを使用して、親コンポーネントのデータmessageを取得します。

$parentを使用するとコードの可読性が低下する可能性があるため、実際の開発では避ける必要があります。ネストレベルが深い。

以上が[編成と共有] Vue 親コンポーネントが子コンポーネントを呼び出すための一般的なメソッドとテクニックの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。