子コンポーネントにワンタイムイベントを送信する

Question

私はかなり簡単だと思うものを実装するのに苦労しています。

私のVueアプリケーションでは、リストをループします。各リストアイテムは子コンポーネントです。各リスト項目には、展開/折りたたみボタンがあります。それはうまくいきますが、私は親からのすべての未処理アイテムを閉じることができるようにしたいと思っています。

拡大/縮小は、私が代わりにいるisOpenと渡す小道具の計算されたプロパティを使用して試してみましたが、その問題は、それがよりANのように行動する必要があり、私だと思いれるisOpenので

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

という変数を介して制御されますイベント。

オープンリストの項目を3つ考えます。リストアイテムが小道具によって制御されていて、falseに設定するとアイテムが閉じられると、アイテムが再び開かれたときに小道具はまだfalseなので、もう一度は機能しません。私はそれを親に戻すことができますが、間違っているようです。

これを行うにはどうすればよいでしょうか？

Answer 1

"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>