發送一個時間事件給子組件

在我的Vue應用程序中，我遍歷一個列表。每個列表項都是一個子組件。每個列表項都有一個展開/摺疊按鈕。這工作正常，但我希望能夠關閉父母的所有未清項目，並且我似乎無法按照我的意願進行工作。

展開/摺疊通過一個叫isOpen可變控制，從而

<div v-if="isOpen">Something here</div>

我一直在使用一個計算的屬性而不是ISOPEN並通過道具嘗試，但這個問題是我認爲它需要更像一個事件。

考慮三個打開的列表項。如果列表物品是由道具控制的，並將其設置爲false會關閉物品，當物品重新打開時，道具仍然是false，因此不會再次運行。我知道我可以將它改回父母身上，但似乎是錯誤的。

什麼是最好的方式來實現這一目標？

來源

2017-07-18 Craig Ward

爲什麼你不加'open'和'close'方法你內心的組件設置/取消設置'isOpen'標誌？擴展所有你只需要調用每個組件的'open'方法。 – Cristy

這應該可以通過簡單地使用道具來實現，但是如果組件不是直接相關的，你總是可以使用事件總線。 https://alligator.io/vuejs/global-event-bus/ –

將[事件總線]（https://vuejs.org/v2/guide/components.html#Non-Parent-Child-Communication）傳遞給每個兒童。讓孩子們對巴士上的一個「近距離」事件做出迴應。當父母在公交車上發出關閉事件時，所有人都會迴應。 –

如果您傳遞了「allClosed」屬性，您需要讓子組件在每次打開時發出重置事件。這對我來說似乎很難受。我認爲你是對的，它應該更多地是父母對兒童的事件，這需要一個事件公共汽車。

new Vue({ 
 
    el: '#app', 
 
    data: { 
 
    closeBus: new Vue(), 
 
    kids: [1, 2, 3] 
 
    }, 
 
    components: { 
 
    expandableThing: { 
 
     data() { 
 
     return { 
 
      isOpen: true 
 
     } 
 
     }, 
 
     props: ['bus'], 
 
     methods: { 
 
     toggle() { 
 
      this.isOpen = !this.isOpen; 
 
     } 
 
     }, 
 
     created() { 
 
     this.bus.$on('close',() => this.isOpen = false); 
 
     } 
 
    } 
 
    } 
 
});

<script src="//cdnjs.cloudflare.com/ajax/libs/vue/2.3.4/vue.min.js"></script> 
 
<div id="app"> 
 
    <expandable-thing v-for="kid in kids" inline-template :bus="closeBus"> 
 
    <div> 
 
     <div v-show="isOpen">My stuff!</div> 
 
     <button @click="toggle">Toggle</button> 
 
    </div> 
 
    </expandable-thing> 
 
    <button @click="closeBus.$emit('close')">Close all</button> 
 
</div>

來源

2017-07-18 13:33:58

乾杯羅伊，這看起來很完美 –

發送一個時間事件給子組件

回答

相關問題