Vue2 と比較した Vue3 の変更点: コンポーネント間の通信がより柔軟になりました

Vue2 と比較した Vue3 の変更点: コンポーネント間の通信がより柔軟になりました

フロントエンド開発において、コンポーネントは複雑なアプリケーションを構築するための基本モジュールです。 Vue フレームワークでは、コンポーネント間の通信は常に重要なトピックです。従来の Vue2 バージョンでは、コンポーネント間の通信は主に props とイベントを通じて実現されます。ただし、UI インターフェイスとビジネス ロジックが複雑になるにつれて、このアプローチは柔軟性がなくなる可能性があります。 Vue3 バージョンでは、コンポーネント間の通信をより便利かつ柔軟にするためのより多くのオプションが提供されます。

Vue3 では、provide と inject を使用して、複数のネスト レベルにわたって使用できる依存関係注入システムを作成できます。以下は、provide と inject を使用してコンポーネント間の通信を実現する方法を示すサンプル コードです。

// ParentComponent.vue
<template>
  <div>
    <h2>Parent Component</h2>
    <child-component></child-component>
  </div>
</template>

<script>
import { provide, ref } from 'vue';
import ChildComponent from './ChildComponent.vue';

export default {
  components: {
    ChildComponent
  },
  setup() {
    const message = ref('Hello from parent!');

    provide('message', message);

    return {
      message
    };
  }
};
</script>


// ChildComponent.vue
<template>
  <div>
    <h2>Child Component</h2>
    <button @click="updateMessage">Update Message</button>
    <p>{{ message }}</p>
  </div>
</template>

<script>
import { inject } from 'vue';

export default {
  setup() {
    const message = inject('message');
    
    const updateMessage = () => {
      message.value = 'Updated message from child!';
    };

    return {
      message,
      updateMessage
    };
  }
};
</script>

上の例では、親コンポーネント ParentComponent は、provide## を通じて message 変数を子コンポーネント ChildComponent## に渡します。 ＃ 関数 ＃。子コンポーネントは、inject 関数を通じて親コンポーネントから提供された message 変数を受け取ります。このようにして、子コンポーネントは親コンポーネントのデータに直接アクセスし、必要に応じてデータを更新できます。

provide

と inject を使用すると、特に多層のネストされたコンポーネント間で、柔軟なコンポーネント通信を実現できます。このアプローチにより、コンポーネント間のデータ転送の複雑さが軽減されるだけでなく、コードの可読性と保守性も向上します。 provide

と

inject に加えて、Vue3 には新しいグローバル イベント バス (イベント バス) システムも導入されており、コンポーネント間の通信がより便利になります。 createApp 関数の config オプションを使用してグローバル イベント バスを作成し、$on、$off、 $emit およびその他のメソッドを使用して、イベントを監視およびトリガーします。 以下は、コンポーネント通信にグローバル イベント バスを使用するサンプル コードです:

// main.js
import { createApp } from 'vue';
import App from './App.vue';

const app = createApp(App);

app.config.globalProperties.$bus = createEventBus();

app.mount('#app');

// event-bus.js
import mitt from 'mitt';

export function createEventBus() {
  const bus = mitt();

  return {
    $on: bus.on,
    $off: bus.off,
    $emit: bus.emit
  };
}

// ParentComponent.vue
<template>
  <div>
    <h2>Parent Component</h2>
    <button @click="updateMessage">Update Message</button>
  </div>
</template>

<script>
export default {
  methods: {
    updateMessage() {
      this.$bus.$emit('message-updated', 'Updated message from parent!');
    }
  }
};
</script>


// ChildComponent.vue
<template>
  <div>
    <h2>Child Component</h2>
    <p>{{ message }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      message: ''
    };
  },
  created() {
    this.$bus.$on('message-updated', (newMessage) => {
      this.message = newMessage;
    });
  }
};
</script>

上の例では、グローバル イベント バス

$bus## を作成することでこれを実現しました。 # 親コンポーネントは子コンポーネントにデータを渡します。親コンポーネントは、

$emit

メソッドを呼び出して message-updated イベントをトリガーし、新しいメッセージをパラメーターとして渡します。子コンポーネントは message-updated イベントをリッスンし、イベント コールバックで独自の message データを更新します。 Vue3 フレームワークは、コンポーネント間のより柔軟な通信方法を提供し、依存関係注入システムであっても、グローバル イベント バス システムであっても、コンポーネント開発をより便利かつ柔軟にします。これらの新機能により、複雑なアプリケーションをより適切に構築でき、コードの可読性と保守性が向上します。これらの機能を実際のプロジェクトで使用して、開発効率とコード品質を向上させることを楽しみにしています。

以上がVue2 と比較した Vue3 の変更点: コンポーネント間の通信がより柔軟になりましたの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。