Vue.js親子の小道具を介した通信とイベントが

Question

こんにちは私はVue.jsにrelativly新しいですとSOFAR私はそれで働くのが好きしかし、今日、私は苦労していると私は私の問題のためにきれいな解決策を見つけていません。

私はv-forループで作成した9個のChild.vueコンポーネントを持っています。すべてのChild.vueにはContextMenu.vueコンポーネントが含まれています。 Child.vueのボタンをクリックすると、このコンテキストメニューが表示されます。すべてがうまく動作します。

ここでは、すべての時点で1つのコンテキストメニューしか表示しないようにします。だから、私は "menuIsShown"のようなParent.vueにイベントを送出し、すべてのChild.vueに親のイベントを送出してメニューを隠すことを考えていました。 1つのメニューで、私はそれを単に目に見えるように設定することができました。

this.$emit('contextMenuShown', true); 
this.showMenu(); 

しかし、私が知ったように、Vue2にはもう$ディスパッチはありません。だから、私はこれを使って、すべてのChild.vueでメソッドをトリガーするParent.vueの$子を試しました。どういうわけかこれもうまくいきませんでしたし、子供たちに連絡するために小道具を使うべきであるので、この問題のためのよりよい解決策がなければならないと思います。しかし、これはforループではかなり難しいようです。グローバルイベントバスを使用することも可能ですが、それは本当に必要ですか？

この問題を解決するためのベストプラクティスのアドバイスはありますか？データは小道具を経由して、親から子に渡すことができますので、事前 ロビ

Answer 1

Vueの中

おかげで、one way data flowを持っています。 here

しかし、多くの子コンポーネントがある場合は、セントラルステートマシンを使用することをお勧めします。また、vuexは非常によく知られています。コミュニティ。親で

Answer 2

：

this.$children[index].$emit('contextMenuShown', true); 

子供には：

mounted() { 
    this.$on('contextMenuShown', function() { 
     // Do stuff 
    }); 
} 

Answer 3

は、私はあなたがvue-clickawayを使用することをお勧めします。このプロジェクトは、コンポーネント外のクリックをリッスンしたい場合に使用します。

使用することは、私が自分でそのようなことをしなければならなかったとき、私はeventbusを使用していた

import { mixin as clickaway } from 'vue-clickaway'; 

export default { 
    mixins: [ clickaway ], 
    template: '<p v-on-clickaway="away">Click away</p>', 
    methods: { 
     away: function() { 
     console.log('clicked away'); 
    }, 
    }, 
}; 

非常に単純です。イベントバスは、状態を過度に使用する可能性があり、各コンポーネントから放射することで混乱を招く可能性があるようなものです。

Answer 4

ありがとうございました。私はすべての子供に方法を呼んでしまった。 これは私にとって最も論理的な方法だと思います（いくつかの方法があります）。子にアクセスするのは、2つのnestet v-forループで生成するため、あまり便利ではありません。アクセスするのはあまりエレガントではありませんが、機能しています。

var rows = this.$children[0].$children 
     for(var j = 0;j<rows.length;j++){ 
     var row = rows[j].$children; 
     for(var i = 0; i<row.length;i++){ 
     row[i].hideMenu(); 

     } 


     } 




    },