Vueの親コンポーネントと子コンポーネント間で値を渡すにはどうすればよいですか?コミュニケーション方法の紹介

Vue は一般的に使用されるフロントエンド開発フレームワークであり、コンポーネント化の考え方が Vue の中核です。コンポーネント化のアイデアの核心は、コンポーネントをコンポーネントに分割して、複雑なコンポーネントをより明確にし、保守しやすくすることです。このときやりたいのはこれらのコンポーネント間の通信であり、親コンポーネントから子コンポーネントへメソッドを渡すことは重要な技術です。この記事では、Vue コンポーネント間、特に親コンポーネントから子コンポーネントにメソッドを渡す方法を紹介します。

1. 親コンポーネントからメソッドを送信する

まず、Vue では親コンポーネントが子コンポーネントにメソッドを渡す方法はたくさんあります。最初に最も単純な例を見てみましょう。 。

まず、親コンポーネントでメソッドを定義します。

methods: {
    hello(){
        console.log('hello');
    }
}

次に、このメソッドを子コンポーネントに渡す必要があります。 Vue では、親コンポーネントは props を通じて子コンポーネントにデータとメソッドを渡すことができます。

親コンポーネントでは、次の方法でメソッドを渡す必要があります:

<child-component></child-component>

子コンポーネントでは、props を通じて親コンポーネントによって渡されたメソッドを受け取る必要があります:

props: {
    hello: Function
}

次に、子コンポーネントでメソッドを呼び出す必要があります。

<button>Click me</button>

この方法で、親コンポーネントによって渡されたメソッドを子コンポーネントで正常に呼び出すことができます。

2. サブコンポーネントが親コンポーネントにメソッドを渡す

次に、サブコンポーネントが親コンポーネントにメソッドを渡す方法を紹介します。親コンポーネントが子コンポーネントにメソッドを渡す方法と比較して、このメソッドはより複雑です。

まず、サブコンポーネントでメソッドを定義します。

methods: {
    send(){
        this.$emit('demo-event');
    }
}

ここでは、$emit イベントを通じて名前付きの「demo-event」をトリガーする送信メソッドを定義します。 Vue でメソッドを渡すときは、関数自体を直接渡すのではなく、イベントを通じて渡すことに注意してください。

次に、親コンポーネントでイベントをリッスンする必要があります。具体的なコードは次のとおりです:

<child-component></child-component>

ここでは、@demo-event を使用して「demo-event」をリッスンします。 " 子コンポーネントによってトリガーされるイベント。親コンポーネントにはイベント処理関数 handleDemo が定義されます。

次に、親コンポーネントで handleDemo メソッドを定義する必要があります。

methods: {
    handleDemo(){
        console.log('demo event received');
    }
}

このようにして、子コンポーネントで send メソッドがトリガーされると、「demo-event」イベントがメソッドがトリガーされ、handleDemo が実行されます。

3. 概要

上記の 2 つの方法により、Vue コンポーネント間でメソッドを渡し、通信を完了して、コンポーネントの再利用と複雑なページの分割を実現できます。実際のプロジェクトでは、コンポーネント間の通信にこの方法を使用することがよくあります。

Vue でメソッドを渡す方法はイベントを通じて行われることに注意してください。これは、Vue のコンポーネント化において非常に重要な概念でもあります。同時に、このメソッドを使用するときは、イベントが正常にトリガーされるように、親コンポーネントと子コンポーネントで定義されているメソッドの名前が同じであることにも注意する必要があります。

以上がVueの親コンポーネントと子コンポーネント間で値を渡すにはどうすればよいですか?コミュニケーション方法の紹介の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。