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

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