VUE3 開発入門: Vue.js を使用したコンポーネント間の通信

最新の Web アプリケーションは複雑さと規模が増大し続けるため、コンポーネント化されたフレームワークの重要性がますます高まっています。 Vue.js は、コンポーネント化されたアプローチを使用して Web アプリケーションを構築する人気のある JavaScript フレームワークです。コンポーネント化により、再利用可能で保守可能なコード ブロックを作成し、それらを組み合わせて複雑な機能を備えた完全なアプリケーションを作成できます。この記事では、VUE3 のコンポーネント間通信について説明します。これは、コンポーネントが相互に情報を受け渡し、連携してタスクを完了できるようにするため、重要なテクノロジーです。

1. Props
   VUE3 では、Props を使用して、親コンポーネントから子コンポーネントにデータを渡すことができます。親コンポーネントでは、子コンポーネントのタグに属性を追加でき、子コンポーネントではこの属性を使用できます。以下は、 コンポーネントの使用例です:

Vue.component('child-component',{
    props: ['message'],
    template: '<div>{{ message }}</div>'
});

var app = new Vue({
    el: '#app',
    data: {
        parentMessage: 'Hello from parent'
    }
});

この例では、「props」属性を含む子コンポーネントを定義し、「 」の値を受け取ることができます。親メッセージ' 。親コンポーネントでは、「v-bind」を介して「parentMessage」を子コンポーネントのプロパティにバインドします。

<div id="app">
    <child-component v-bind:message="parentMessage"></child-component>
</div>

ここでの「v-bind」ディレクティブは、VUE3 に「parentMessage」の値をバインドするように指示します。子コンポーネントの「message」プロパティ。

2. $emit
   VUE3 の親コンポーネントは、「$emit」メソッドを使用して子コンポーネントにイベントを送信できます。子コンポーネントは、「$on」メソッドを使用してこれらのイベントに登録できます。イベントの送受信の例を次に示します。

Vue.component('child-component',{
    template: '<button v-on:click="notify">Click me</button>',
    methods:{
        notify: function(){
            this.$emit('clicked');
        }
    }
});

var app = new Vue({
    el: '#app',
    methods:{
        handleClick: function(){
            alert('Button clicked');
        }
    }
});

この例では、子コンポーネント「child-component」は、「$emit」を使用してイベントを送信する「notify」メソッドを定義します。 「クリック」という名前。親コンポーネントでは、「v-on」ディレクティブを使用して、「clicked」イベントを「handleClick」メソッドにバインドできます。

<div id="app">
    <child-component v-on:clicked="handleClick"></child-component>
</div>

ユーザーが子コンポーネントのボタンをクリックすると、それがトリガーされます。 'notify' 'clicked' イベントを送信させるメソッド。次に、親コンポーネントの「handleClick」メソッドが呼び出され、ポップアップ ボックスが表示されます。

3. イベント バス
   複数のコンポーネント間でデータやイベントを共有する必要がある場合があります。現時点では、通信にイベント バスを使用できます。イベント バスは、アプリケーション内のイベントとデータを管理するために使用される VUE3 インスタンスです。イベント バスの使用例を次に示します。

var bus = new Vue();

Vue.component('component-a',{
    template: '<button v-on:click="triggerEvent">Click me</button>',
    methods:{
        triggerEvent: function(){
            bus.$emit('event-from-a');
        }
    }
});

Vue.component('component-b',{
    template: '<div>{{ message }}</div>',
    data:function(){
        return {
            message: ''
        };
    },
    created:function(){
        var _this = this;
        bus.$on('event-from-a',function(){
            _this.message = 'Received event from Component A';
        });
    }
});

var app = new Vue({
    el: '#app'
});

この例では、「bus」という名前の VUE3 インスタンスを作成し、それを 2 つのコンポーネントで使用します。 「component-a」コンポーネントは「event-from-a」という名前のイベントをトリガーして「バス」インスタンスに送信し、「component-b」コンポーネントは「event-from-a」を「バス」に登録します。インスタンス イベントを呼び出し、イベントの発生時に「data」の「message」プロパティを更新します。

上記の実践を通じて、VUE3 コンポーネント通信を使用すると、親コンポーネントと子コンポーネント間でデータとイベントを簡単に転送できることがわかります。同時に、イベント バスは、複数のコンポーネント間でデータを共有する簡単な方法を提供します。イベント。実際には、開発効率を向上させ、必要な機能を実現するために、プロジェクトの実情に応じてコンポーネントの通信方式を柔軟に使い分ける必要があります。

以上がVUE3 開発入門: Vue.js を使用したコンポーネント間の通信の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。