Как передать данные с пользовательскими событиями, используя шину событий в Vue.js 2

Question

Я использую 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')
    }
  }
}

Пока все хорошо, все работает, как и ожидалось.

Вопрос в том, как передать объект в мое пользовательское событие.чтобы я мог отправить дополнительную информацию слушателям?

Answer 1

Вы можете создать событие таким образом для одного аргумента:

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)
    }
  }
}

Answer 2

Вы можете просто испустить объект через шину событий:

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

И затем поймать его так:

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

Answer 3

Вы можете передать свой параметр в качестве второго аргумента

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

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

Вы можете проверить в следующем уроке