vue がレベル間でコンポーネントのメソッドを呼び出す方法

Vue は一般的なフロントエンド フレームワークとして、強力なデータ バインディング機能とコンポーネント開発機能を備えていますが、実際のプロジェクトでは、レベルを超えてコンポーネント内のメソッドを呼び出す必要があることがよくあります。この記事では、Vue のコンポーネント通信メカニズムを使用してコンポーネントにクロスレベル呼び出しメソッドを実装する方法を紹介します。

1. グローバル イベント バス

Vue は、非常にシンプルなグローバル イベント バス-イベント バスを提供します。イベント センターは、すべてのコンポーネントからアクセスできるグローバル Vue インスタンスであり、コンポーネント間の通信に使用されます。通常、Vue のルート インスタンスにイベント センターを作成します。

1. グローバル イベント センターの作成

ルート コンポーネントで、Vue インスタンスの "$emit" メソッドを使用してイベント センターにイベントをディスパッチすることができます。 「$ on」メソッドを使用して、イベント センターのイベントをリッスンできます。以下はサンプル コードです。

// 在 main.js 中创建事件中心
import Vue from 'vue'

export const EventBus = new Vue()

// 在组件中派发事件
import { EventBus } from './main.js'

EventBus.$emit('my-event', data)

// 在组件中监听事件
import { EventBus } from './main.js'

EventBus.$on('my-event', data => {
  // 处理事件
})

2. グローバル イベント センターを使用してコンポーネント間でメソッドを呼び出す

イベント センターを使用して、コンポーネント間でのメソッド呼び出しを実装できます。コンポーネント A では、"$emit" メソッドを使用してイベント センターにイベントをディスパッチし、コンポーネント B では、"$on" メソッドを使用してイベントをリッスンし、コンポーネント A のメソッドを呼び出します。以下に実装例を示します。

// 组件A
export default {
  methods: {
    myMethod() {
      console.log('Hello, world!')
    }
  }
}

// 组件B
import { EventBus } from './main.js'

export default {
  mounted() {
    EventBus.$on('my-event', () => {
      this.$refs.componentA.myMethod()
    })
  }
}

上記のコードでは、「this.$refs.componentA」は、コンポーネント B に実装されている「componentA」という名前のサブコンポーネントを表します。このようにして、コンポーネントのメソッドを実行できます。 A はコンポーネント B で呼び出されます。

2. $refs

イベント センターに加えて、Vue はコンポーネント インスタンスにアクセスする簡単な方法 $refs も提供します。これは、「ref」属性を参照する現在のコンポーネント内のすべての子コンポーネントのインスタンスを含むオブジェクトです。 $refs オブジェクトにアクセスすることで、子コンポーネントのメソッドを呼び出すことができます。

1. $ref の定義

テンプレートでは、「ref」属性を定義することで子コンポーネントを参照できます。以下に実装例を示します。

// 子组件
<template>
  <div ref="myComponent">Hello, world!</div>
</template>

上記のコードでは、子コンポーネントのテンプレートに「myComponent」という名前の「ref」を定義します。この「ref」には、$refs オブジェクトを介して親コンポーネントでアクセスできます。

2. $refs を使用してコンポーネント内のメソッドを呼び出す

親コンポーネントでは、$refs オブジェクトを使用して子コンポーネント内のメソッドにアクセスできます。以下は実装例です:

// 子组件
export default {
  methods: {
    myMethod() {
      console.log('Hello, world!')
    }
  }
}

// 父组件
export default {
  mounted() {
    this.$refs.myComponent.myMethod()
  }
}

上記のコードでは、親コンポーネントのマウントされたフックで、「this.$refs.myComponent」を使用して子コンポーネントのインスタンスを取得し、その内部メソッドを呼び出します。 。

概要:

この記事では、イベント センターと $refs を使用して Vue コンポーネント間のクロスレベル呼び出しメソッドを実装する方法を紹介します。イベント センターは親以外のコンポーネントと子コンポーネント間の通信に適しており、$refs は親コンポーネントと子コンポーネント間の通信に適しています。実際の開発では、コンポーネントの状態と相互作用をより適切に管理するために、実際の状況に基づいて適切な方法を選択します。

以上がvue がレベル間でコンポーネントのメソッドを呼び出す方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。