ホームページ > ウェブフロントエンド > フロントエンドQ&A > vue コンポーネント間のメソッドが相互に呼び出します

vue コンポーネント間のメソッドが相互に呼び出します

WBOY
リリース: 2023-05-11 09:14:06
オリジナル
5351 人が閲覧しました

Vue コンポーネントベースの開発では、コンポーネントを相互にネストすることができ、異なる構造を持つコンポーネントが互いのメソッドを呼び出す必要があることがよくあります。つまり、別のコンポーネントのメソッドを呼び出すには、コンポーネント内にメソッドを実装する必要があります。次に、Vue コンポーネント間のメソッドがどのように相互に呼び出しを行うかを紹介します。

1. 親コンポーネントを通じて

Vue コンポーネントベースの開発では、各コンポーネントには独自の親コンポーネントがあり、コンポーネントは相互に呼び出すことができます。親コンポーネントでメソッドを定義し、子コンポーネントの $parent を通じて親コンポーネントのメソッドを呼び出すことができます。

最初に親コンポーネントでメソッドを定義します:

methods:{
  changeMsg:function(){
     this.msg='hello world';
  }
}
ログイン後にコピー

次に、子コンポーネントで this.$parent.changeMsg() を使用して、親コンポーネントのメソッドを呼び出します。

2. コンポーネントによる参照

Vue のコンポーネントベース開発では、サブコンポーネントはインポートを通じて他のコンポーネントを導入したり、サブコンポーネント内のコンポーネントを導入するメソッドを直接呼び出すことができます。

コンポーネント A でコンポーネント B のメソッドを呼び出したいとします。まず、以下に示すように、コンポーネント B をコンポーネント A に導入する必要があります。

import B from '../B.vue'
export default {
  components: {
    B
  },...

}
ログイン後にコピー

その後、コンポーネント内で直接使用できるようになります。 A. this.$refs を使用して B コンポーネントのインスタンスを取得し、B コンポーネントのメソッドを呼び出します。

this.$refs.b.test();
ログイン後にコピー

3. Vuex を通じて

Vuex は、グローバルな状態を簡単に管理できる Vue の状態管理ライブラリです。 Vuex でグローバル メソッドを定義し、コンポーネントの $store.dispatch を通じてグローバル Vuex メソッドを呼び出すことができます。

まず、Vuex でメソッドを定義する必要があります:

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

const store = new Vuex.Store({
  state: {
    msg:'hello',
  },
  mutations: {
    changeMsg(state){
      state.msg='hello world';
    }
  },
  actions:{
    changeMsg({commit}){
      commit('changeMsg');
    }
  }
})

export default store;
ログイン後にコピー

次に、コンポーネントで次のコードを使用して、Vuex でメソッドを呼び出します:

this.$store.dispatch('changeMsg');
ログイン後にコピー

4. イベントを通じてバス

Vue では、イベント バスを介してコンポーネント間の通信を実現できます。このアプローチにより、イベントがアプリケーションのさまざまな部分に分散され、コンポーネント間でデータを受け渡すことが可能になります。

空の Vue インスタンスをイベント バスとして作成し、コンポーネント内でイベント バスを呼び出してイベントをトリガーできます。

まず、main.js でイベント バスとして Vue インスタンスを作成します:

Vue.prototype.$bus = new Vue()
ログイン後にコピー

次に、コンポーネント内で次のコードを使用してイベントをトリガーできます:

 this.$bus.$emit('EVENT_NAME', data)
ログイン後にコピー

最後にコンポーネント内で次のコードを使用してイベントを受信できます。

this.$bus.$on('EVENT_NAME', data => {
    // handle event
})
ログイン後にコピー

上記の 4 つのメソッドを通じて、Vue コンポーネント間で相互に呼び出すメソッドを実装できます。実際のアプリケーションでは、コンポーネント間のメソッド呼び出しを実装するニーズに最も適したメソッドを選択できます。

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

ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート