REF в VUEJS как вызвать метод из другого компонента?

Question

[Mr_Romanov]

Пытаюсь разобраться с вызовом методов из разных компонентов, из дочерних разобрался

this.$root.$on('Мойкомпонент',() => {
                this.Мойметод();
           
            })

///и в дочернем компоненте
this.$root.$emit('Мойкомпонент')

Надеюсь правильно?

А как мне вызвать метод который не связан с компонентом никак?

Нагуглил ref, пытаюсь

<tenant-number-modal ref="modal"></tenant-number-modal>

      methods: {
         openModal() {
            this.$refs.modal.showModal();
         }
      }


//Источник метода

    methods: {
       showModal() {
       this.dialog = true;
       }
    }

VUE ругается на tenant-number-modal ну и естественно метод не срабатывает, я что-то не так делаю?

Answer 1

[ned4ded]

Добрый день!

Согласно официальному стайлгайду, стоит избегать использования любого управления состоянием, кроме как через vuex.

Если по порядку, то я знаю два паттерна, которые позволят решить проблему коммуникаций компонентов вью: flux design pattern (реализованное с помощью библиотеки vuex), и event bus.

То, что пытаетесь сделать вы, - это event bus, только вместо использования отдельного экземпляра вью вы в качестве шины используете рутовый экземпляр (по крайней мере в первой части кода).

Если нет желания разбираться во vuex, то попробуйте организовать работу через шину, оно подойдет для обоих перечисленных вами случаев.

Event bus для вью основан на встроенных во вью кастомных событиях (реализованных через vm.$on и vm.$emit, подробнее). Обычно создается еще один экземпляр вью:

// Дальше идет псевдокод, возможны синтаксические ошибки.

// event-bus.js
import Vue from 'vue'

export default new Vue()

// app.js
import Vue from 'vue'
import bus from './event-bus'

export default new Vue({
  created() {
     bus.$on('some-event', () => { console.log('hi!') })
  },

  components: {
    child: {
      methods: {
        triggerSomeEvent() {
          bus.$emit('some-event')
        }
      }
    }
  }
})

Эту шину импортируете в те компоненты, которые подвязаны на события, инициализируемые в этой шине (т.е. и отправитель и получатель события), здесь будет не важно, родитель это, ребенок, потомок или независимый компонент.