複数のファイル間でメソッドを呼び出すためのいくつかの方法 Vue

Vue 開発では、通常、開発に単一ファイル コンポーネント (.vue ファイル) を使用し、コードの可読性と保守性を向上させるためにコンポーネントを分割します。ただし、複数の単一ファイル コンポーネント間でメソッドを呼び出す場合、いくつかの問題が発生する可能性があります。この記事では、Vue で複数のファイル間でメソッドを呼び出すいくつかの方法を紹介します。

1. Mixin を使用する (Mixin)

Mixin は、Vue が提供する非常に便利なメソッドで、いくつかの共通コードをカプセル化し、複数のコンポーネント間で共有できます。 Mixin で共有する必要があるメソッドを記述し、これらのメソッドを使用する必要があるコンポーネントにこの Mixin を導入できます。

たとえば、showMsg メソッドを含む Mixin ファイル mixin.js があります。

export default {
  methods: {
    showMsg() {
      console.log('hello world')
    }
  }
}

showMsg メソッドを使用するコンポーネントに mixin.js を導入するだけです。

import mixin from './mixin.js'

export default {
  mixins: [mixin],
  ...
}

上記のコードでは、mixins 属性を使用して mixin.js にコードを導入し、コンポーネントに追加します。

このようにして、コンポーネントで showMsg メソッドを使用できます。

this.showMsg()

2. これを使用します。$refs

Vue でコンポーネントを定義するとき、それに ref 属性を設定し、コンポーネント内でこのコンポーネント インスタンスを参照できます。この ref を使用して、現在のコンポーネントのメソッドを呼び出すことができます。

たとえば、コンポーネント A とコンポーネント B という 2 つのコンポーネントがあります。コンポーネント A はコンポーネント B のメソッドを呼び出します。これは、次の手順で実現できます。

1. ref を設定します。コンポーネント B の属性

<template>
  <div>
    组件B
  </div>
</template>

<script>
export default {
  methods: {
    methodOfB() {
      console.log(&#39;methodOfB&#39;)
    }
  }
}
</script>

<template>
  <div>
    <component-b></component-b>
  </div>
</template>

<script>
import ComponentB from &#39;./ComponentB.vue&#39;

export default {
  components: {ComponentB},
  methods: {
    methodOfA(){
      this.$refs.b.methodOfB()
    }
  }
}
</script>

コンポーネント A のメソッドで this.$refs.b を使用してコンポーネント B のインスタンスを取得し、コンポーネント B のメソッドを使用します。

3. vuex を利用する

Vuex は Vue が公式に提供している状態管理ツールで、複数のコンポーネント間でデータを共有するのに非常に便利です。さらに、複数のコンポーネントで使用するために Vuex でいくつかのパブリック メソッドを定義することもできます。

たとえば、パブリック メソッドが定義されている store.js ファイルがあります。

export default new Vuex.Store({
  state: {...},
  mutations: {...},
  actions: {...},
  getters: {...},
  methods: {
    showMsg() {
      console.log('hello world')
    }
  }
})

このパブリック メソッドを使用する必要があるコンポーネントでは、次のように提供される mapActions メソッドを使用できます。 Vuex to このメソッドはコンポーネントにマッピングされます。

import { mapState, mapMutations, mapActions } from 'vuex'

computed: {
  ...mapState(['...']),
},
mutations: {
  ...mapMutations(['...']),
},
actions: {
  ...mapActions(['showMsg']),
}

これにより、コンポーネントで showMsg メソッドを使用できるようになります。

4. EventBus の使用

Vue 独自の EventBus を使用してコンポーネント間で通信し、共有する必要があるメソッドを EventBus にバインドし、他のコンポーネントでこれらのメソッドを使用できます。

たとえば、main.js で EventBus を作成します。

import Vue from 'vue'

export const EventBus = new Vue()

共有メソッドを使用する必要があるコンポーネントでは、EventBus.$on メソッドを使用してイベントをリッスンして取得できます。ニュースと呼ばれる共有メソッド。

mounted(){
  EventBus.$on('showMsg', ()=>{this.showMsg()})
},

共有メソッドを持つコンポーネントでは、EventBus.$emit メソッドを使用して showMsg イベントをトリガーできます。

EventBus.$emit('showMsg')

概要

上記は、複数のファイル Vue 間でメソッドを呼び出すいくつかの方法です。 Mixin、this.$refs、Vuex、EventBus を通じて、複数のコンポーネントでメソッドを共有する必要性を簡単に認識できます。実際の開発では、状況に応じて自分に合った方法を選択することができます。

以上が複数のファイル間でメソッドを呼び出すためのいくつかの方法 Vueの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。