如何在vue.js 2的其他組件中調用方法？

我的第一個組件是這樣的：如何在vue.js 2的其他組件中調用方法？

<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，然後它會得到響應AJAX

我想送響應Ajax和其他參數方法的createImage。方法的createImage位於其他成分（第二部分）

我的第二個組成部分是這樣的：

<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方法之後，它可以在第二更改元素零件？

來源

2017-07-14 Success Man

這可能嗎？如果不是在執行addPhoto方法時是否有另一種解決方案來更改第二個組件中的元素？ –

第一部分和第二部分之間的關系是什麼？他們是父母或兄弟姐妹嗎？通常情況下，你會['放出']（https://vuejs.org/v2/api/#vm-emit）一個來自孩子的事件，並在父母中註冊該事件的處理程序，否則你可以得到一個使用['ref']（https://vuejs.org/v2/api/#ref）並使用它直接調用該方法的組件。 –

如果這兩個組件是兄弟姐妹（沒有父母&孩子），那麼一種解決方案是使用事件總線。

總體思路是建立一個全球性的事件處理程序，像這樣：在main.js

window.Event = new Vue();

然後在你的第一個組件火災的事件：

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

，並在第二部分寄存器用於收聽createImage事件的處理程序mounted()掛鉤：

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

你可以通過閱讀this turtorial並觀看this screen cast找到更多的信息。

來源

2017-07-14 13:12:53 ironcladgeek

如何在vue.js 2的其他組件中調用方法？

回答

相關問題