Как вызвать метод на компоненте, нажав Vue.js?

Question

Я использовать компонент в диалоговом окне dialog.vue из вю-леи пакета

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

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

Как можно позвонить по методу open() в <mdl-dialog></mdl-dialog>?

Answer 1

Поскольку они не являются родительскими родителями, вы хотите использовать шину событий. Так как вы используете .vue файлы, которые вы можете создать файл с именем bus.js как

import Vue from 'vue' 
export default new Vue() 

Затем, импорт, что там, где вы должны излучать и слушать централизованные мероприятия. Вот простой пример:

// SomeComponent.vue 
import bus from './bus.js' 

export default { 
    methods: { 
    log (msg) { 
     console.log(msg) 
    } 
    }, 
    created() { 
    bus.$on('someEvent', this.log) 
    } 
} 

Тогда в другом компоненте вы можете сделать, как ...

// AnotherComponent.vue 
import bus from './bus.js' 

export default { 
    methods: { 
    emitClick (msg) { 
     bus.$emit('Hello from AnotherComponent.vue') 
    }, 
    }, 
} 

Вы можете прочитать немного больше об этом здесь: https://vuejs.org/v2/guide/components.html#Non-Parent-Child-Communication

Answer 2

Вы можете создать ниже вспомогательный метод в методах вашего основного компонента:

getChild(name) { 
    for(let child of this.$children) if (child.$options.name==name) return child; 
}, 

И вызвать дочерний компонент метод таким образом:

this.getChild('mdl-dialog').open(); 

Я не проверить его на Vue> = 2,0