別のjsファイルからvueコンポーネントメソッドを呼び出す方法

Question

同じコンポーネント内のボタンをクリックすると、Vue v2.3.4（quasar-framework v0.14.2）モーダルComponentAが動作します。 MyModalコンポーネントはうまく動作しているようです（ボタンでトリガーできるので）。しかし私はモーダル（ 'myUtilElement'から）を引き起こすべき別のutil.jsファイルにコードを持っています。どうやってやるの？

ComponentA.vue

<template> 
    <div> 
    <div id='lotsofstuff'></div> 
    <myModal ref="myModal"></myModal> 
    </div> 
</template> 

<script> 
import MyModal from '../MyModal.vue' 

export default { 
    name: 'componentA', 
    components: {MyModal}, 
    methods: { 
    openModal: function() { 
     this.$refs.myModal.open() 
    }, 
    otherMethods:...etc. 
} 

Util.js

import ComponentA from '../ComponentA.vue' 

myUtilElement.addEventListener('click', triggerModal, false) 

function triggerModal() { 
    ComponentA.methods.openModal() 
} 

私は今、コンソールにエラーを以下の取得：

Uncaught TypeError: Cannot read property 'openModal' of undefined 
    at HTMLElement.triggerModal 

Answer 1

non parent-child communication on the docsを参照してください。基本的に、イベントバスまたは集中管理の2つの共通オプションがあります。 Vueのため

var bus = new Vue() 
// in component A's method 
bus.$emit('openModal', params) 
// in component B's created hook 
bus.$on('openModal', function(params) { 
    // ... 
}) 

最も一般的な中央集権国家管理ライブラリがVuexで、Reduxのは/ etc /束に似ています。
イベントバスは、単純なパブ・サブパターンです。