There is a modal dialog.vue component from the vue-mdl package.
<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> I want to call this window in another component
<mdl-dialog></mdl-dialog> <button class="mdl-button mdl-js-button mdl-button--raised">Click me</button> I did not find information on how to call the method of one component inside another. All examples mostly use props. Tell me how to do this?
