Vue.jsをクリックしてコンポーネントのメソッドを呼び出す方法

Question

は、私は私が私が見つけた他のコンポーネント

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

にダイアログウィンドウを持って帰りたいと思う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> 

からダイアログウィンドウdialog.vueのコンポーネントを使用していますなしあるコンポーネントのメソッドを他のコンポーネント内で呼び出す方法に関する情報。すべての例は、主に使用される小道具です。それをする方法を教えてください？

open（）を<mdl-dialog></mdl-dialog>で呼び出すことはできますか？

Answer 1

親の子供ではないので、イベントバスを使いたいです。あなたが.vueファイルを使用しているので、あなたが次に

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

ようbus.jsというファイルを作成することができ、輸入あなたが発する、集中イベントをリッスンする必要がどこにいます。ここでは簡単な例です：あなたは次のように行うことができます別のコンポーネントで次に

// 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; 
}, 

子コンポーネントこのようにする方法：私はNPMを通してそれを引っ張っている場合

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

私は> Vueのためにそれをテストしていない= 2.0