bugfix> javascript > 投稿

私は使っていますVue.js 2.5.x.

私のおもちゃプロジェクトでは、イベントバスを実装しました(示されているものと同様に)ここに)。 イベントバスは、vueプロトタイプに $eventBus としてグローバルに登録されています 。

次に、次のようにイベントを発行するコンポーネントを作成しました

this.$eventBus.$emit('actionCompleted')

そして、そのイベントに登録して独自の関数( myMethod )、以下に示すように

export default {
  created: function () {
      this.$eventBus.$on('actionCompleted', this.myMethod)
  },
  methods: {
    myMethod () {
        console.log('myMethod called')
    }
  }
}

これまでのところ、すべて正常に機能しています。

問題は、リスナーに追加情報を送信できるように、オブジェクトをカスタムイベントに渡すにはどうすればよいですか?

回答 3 件
  • パラメーターを2番目の引数として渡すことができます

    this.$eventBus.$emit('actionCompleted', objectParams)

    export default {
      created: function () {
          this.$eventBus.$on('actionCompleted', this.myMethod)
      },
      methods: {
        myMethod (objectParams) {
            console.log('myMethod called', objectParams)
        }
      }
    }
    
    

    次のチュートリアルを確認できます

  • 単一の引数に対して次のようなイベントを作成できます。

    this.$eventBus.$emit('actionCompleted',args)
    
    

    カンマ区切り値で複数の引数を渡すことができます。

    倍数引数:

    this.$eventBus.$emit('actionCompleted',args1, args2 ...)
    
    

    その引数を渡した後、次のように取得できます[単一の引数の場合]:

    export default {
      created: function () {
          this.$eventBus.$on('actionCompleted', this.myMethod)
      },
      methods: {
        myMethod (args) {
            console.log('myMethod called', args)
        }
      }
    }
    
    

  • イベントバスを介してオブジェクトを単純に発行できます。

    this.$eventBus.$emit('actionCompleted', this.yourObject)
    
    

    そして、次のようにキャッチします。

    export default {
      created: function () {
          this.$eventBus.$on('actionCompleted', this.myMethod)
      },
      methods: {
        myMethod (objectParams) {
            console.log('myMethod called', objectParams)
        }
      }
    }
    
    

あなたの答え