vue がレベル間でコンポーネントのメソッドを呼び出す方法-フロントエンドQ&A-php.cn

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

WBOY

リリース： 2023-05-23 21:49:07

オリジナル

1305 人が閲覧しました

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

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

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

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

ルートコンポーネントで、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 => {
  // 处理事件
})

ログイン後にコピー

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

イベントセンターを使用して、コンポーネント間でのメソッド呼び出しを実装できます。コンポーネント 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 オブジェクトにアクセスすることで、子コンポーネントのメソッドを呼び出すことができます。

$ref の定義

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

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

ログイン後にコピー

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

$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 サイトの他の関連記事を参照してください。