Vue js 2を使用してコンポーネントのサブコンポーネントチェーンにイベントをバブルする方法はありますか？

Question

私が使用して私のVUEのアプリケーションを持っている：誰かがために、私はイベントを放出するボタンをクリックすると、コンポーネントの親内のコンポーネントと子

で作られて

コンポーネントの親コンポーネントを、私はボタンを持っていますVUEによって処理し、別のコンポーネント私がこれまでにやった

に渡される：

var vm = new Vue({ 
     el: '#app', 

     methods:{ 

      itemSelectedListener: function(item){ 
       console.log('itemSelectedListener', item); 
      } 
     } 
    }); 




Vue.component('component-child', { 

         template: ' <span v-on:click="chooseItem(pty)" >Button </span>' 
         , 
         methods: { 

          chooseItem: function(pty){ 
           console.log(pty); 
           this.$emit('itemSelected', { 
            'priority' : pty 
           }); 
          } 
         } 
        }); 

Vue.component('component-parent', { 
         template: '<component-child v-for="q in items" ></component-child>' 
        }); 

HTML：

​​

これは私のconsole.log（pty）に届きます。ラインは、それが思われるこの$発する（文句を介して取得 'itemSelected'：。

はconsole.log（ 'itemSelectedListener'、アイテム）; //これは行っていないが呼び出されると...

ヒント？

は、私はバブルアップチャイルド> parent->ヴュー・インスタンスからイベントをすべきか？（私もそれを試みたが、成功しません）

Answer 1

それは、複数のレンダリングしようとしてあなたcomponent-parentテンプレートを持つ1つの問題はありますVueは通常、コンポーネント内に単一のルートdivを必要とするため、divや他のタグにラップする必要があります。

<div> 
    <component-child v-for="q in items"></component-child> 
</div> 

2つ目の注意点は、2レベル下にある子コンポーネントからイベントを送出し、ルートでそれを聞くことです。

Root //but you listen to the event up here 1 level above 
Component 1 //you should listen to the event here 
    Component 2 //your try to emit it from here 

ここには2つのオプションがあります。いずれかのcomponent-childからそれを聞いてもcomponent-parentでそれを聞いて、それも上向きに伝播する。 Fiddle https://jsfiddle.net/bjqwh74t/29/

第2の選択肢は、非子 - 親コンポーネント間の通信を必要とする場合に使用できる空のvueインスタンスであるbusというグローバルを登録することです。 Fiddle https://jsfiddle.net/bjqwh74t/30/

通常、親コンポーネントと子コンポーネントの間には、子から放射し、親をv-on:event-name="handler"でリッスンしてイベントを直接使用しますが、コンポーネント間のレベルが高い場合は2番目の方法を使用します。最初のケースのための

ドキュメントへのリンク：秒の場合のhttps://vuejs.org/v2/guide/components.html#Using-v-on-with-Custom-Events

ドキュメントへのリンク：https://vuejs.org/v2/guide/components.html#Non-Parent-Child-Communication

PS：あなたは-代わりに大文字で書くことを意味するイベント名のケバブ・ケースを使用して好みます。大文字で書くと、あなたのイベントがルートに捉えられていない奇妙な状況が発生する可能性があります。