vue.js 2の他のコンポーネントでメソッドを呼び出す方法はありますか？

Question

このような私の最初のコンポーネント：

<template> 
    ... 
</template> 
<script> 
    export default { 
     ... 
     methods: { 
      addPhoto() { 
       const data = { id_product: this.idProduct} 
       const item = this.idImage 
       this.$store.dispatch('addImage', data) 
        .then((response) => { 
         this.createImage(item, response) 
        }); 
      }, 
     } 
    } 
</script> 

方法addPhotoが呼び出された場合、それは、Ajaxを呼び出しますし、それは私が、メソッドはcreateImageに応答AJAXと別のパラメータを送信するレスポンス・アヤックス

を取得します。どのように私は第二の成分にはcreateImageメソッドを実行することができ、その後、第2の要素を変更することができます

<template> 
    <div> 
     <ul class="list-inline list-photo"> 
      <li v-for="item in items"> 
       <div v-if="clicked[item]"> 
        <img :src="image[item]" alt=""> 
        <a href="javascript:;" class="thumb-check"><span class="fa fa-check-circle"></span></a> 
       </div> 
       <a v-else href="javascript:;" class="thumb thumb-upload" 
        title="Add Photo"> 
        <span class="fa fa-plus fa-2x"></span> 
       </a> 
      </li> 
     </ul> 
    </div> 
</template> 
<script> 
    export default { 
     ... 
     data() { 
      return { 
       items: [1,2,3,4,5], 
       clicked: [], // using an array because your items are numeric 
      } 
     }, 
     methods: { 
      createImage(item, response) { 
       this.$set(this.clicked, item, true) 
      }, 
     } 
    } 
</script> 

：メソッドはcreateImageは、他の成分（第二成分）は、このような

私の第二の成分にあります。成分？

Answer 1

これらの2つのコンポーネントが兄弟（親なし、&子なし）の場合、1つの解決方法はイベントバスを使用することです。

一般的なアイデアはそうのようなグローバルイベントハンドラを構築することです：main.jsあなたの最初のコンポーネント火災イベントに続いて

window.Event = new Vue();

で ：

.... 
.then((response) => { 
    Event.$emit('createImage', item, response) 
}); 

と第二成分のレジスタAにcreateImageのイベントを聞くハンドラmounted()フック：

... 
mounted() { 
    Event.$on('createImage', (item, response) => { 
     // your code goes here 
    } 
} 

this turtorialをご覧になり、this screen castをご覧ください。