Как вызвать метод компонента Vue.js по клику?

Question

[alex5e]

Есть компонент модального окна dialog.vue из пакета vue-mdl

<template>
<div class="mdl-dialog-container" v-show="show">
  <div class="mdl-dialog">
    <div class="mdl-dialog__title">{{title}}</div>
    <div class="mdl-dialog__content">
      <slot></slot>
    </div>
    <div class="mdl-dialog__actions" :class="actionsClasses">
      <slot name="actions">
        <mdl-button class="mdl-js-ripple-effect" @click.native.stop="close">Close</mdl-button>
      </slot>
    </div>
  </div>
</div>
</template>

<script>
import mdlButton from './button.vue'
import createFocusTrap from 'focus-trap'

export default {
  components: {
    mdlButton
  },

  computed: {
    actionsClasses () {
      return {
        'mdl-dialog__actions--full-width': this.fullWidth
      }
    }
  },

  data () {
    return {
      show: false
    }
  },

  props: {
    title: {
      type: String
    },
    fullWidth: Boolean
  },

  mounted () {
    this._focusTrap = createFocusTrap(this.$el)
  },

  methods: {
    open () {
      this.show = true
      this.$nextTick(() => this._focusTrap.activate())
      this.$emit('open')
    },
    close () {
      this.show = false
      this._focusTrap.deactivate()
      this.$emit('close')
    }
  }
}
</script>

Я хочу вызвать это окно в другом компоненте

<mdl-dialog></mdl-dialog>
<button class="mdl-button mdl-js-button mdl-button--raised">Click me</button>

Не нашел информации о том, как вызвать метод одного компонента внутри другого. Все примеры, в основном, используют props. Подскажите, как это сделать?

Answer 1

[Dima Zherebko]

Event bus . <---- var bus = new Vue();
Использовать vuex и в зависимости от стейта открывать/закрывать окно . <--- Те же пропсы, но причёсанные

Comments

[alex5e]

Как мне задействовать шину в mdl-button, если я его через npm притянул? И зачем тогда нужен метод open(), если его, по сути, нигде нельзя вызвать?

[Dima Zherebko]

s77lanselot77s: про шину не понял . Метод опен для того что бы в компоненте открывать или закрывать модалку в зависимости от стейта компонента , но что бы менять стейт компонента из друго-го очень далёкого компонента , юзают или сервисы ( в ангуларе 2 ) или редукс/flux в реакте и вью жс . Может быть есть подход с сервисами как в ангуляре , но vuex вродь более юзабельный