VueJS 2.0親から子への連絡

Question

これは簡単な方法ですが、わかりません。私のHTMLファイルに

私は、次のボタンがあります。そのボタンをクリックする

<button @click="showModal">Show Modal</button> 

は、以下の方法を実行します：

new Vue({ 
    el: '#root', 
    methods: { 
     showModal() { Event.$emit('showModal'); }, 
    } 
}); 

私はそのボタンをクリックしたときに発生します何切り替えることですモーダルコンポーネントのクラスコンポーネントの関連コードは次のとおりです。

Vue.component('modal', { 

    template: ` 
     <div :class="[ modalClass, {'is-active' : isActive }]"> 
      ETC... 
     </div> 
     ` 

    data() { 
     return { 
      isActive: false, 
      modalClass: 'modal' 
     } 
    } 

VueJSの新機能で、Vueでの通信方法を理解しようとしています。私は次のステップを理解していないようです。ボタンをクリックしたときにisActiveがtrueに設定されるようにするにはどうすればよいですか？

ご協力いただきありがとうございます。

すべてのベスト、

モシェ

あなたmain.jsで

Answer 1

（または、これまであなたがVueのアプリをインスタンス化）

あなたはeventbus

Vue.prototype.bus = new Vue(); 

として平野VUEのインスタンスを使用することができます

このようにして使用することができます。

私のvueプロジェクトのgithubを例に挙げてみてください。私はイベントバスをたくさん紹介しています。親から子へと通信するには

https://codepen.io/wilomgfx/pen/OpEVpz?editors=1010

Answer 2

：オペアンプの質問を使用して https://laracasts.com/series/learn-vue-2-step-by-step

本格例： https://github.com/wilomgfx/vue-weather

またVueJS 2に、この無料の素晴らしいシリーズ、その本当に素晴らしいをチェックアウトcomponents propsを使用できます。

あなたがより深いコミュニケーション（親は少し小さな子供と通信する）を持っているなら、@WilomGfxによってbusEventが言及されます。子供に親からの通信のための

コード：

Vue.component('modal', { 
 
    template: '<div :class="[ modalClass, {\'is-active\' : isActive }]">' + 
 
      'Hello Word !' + 
 
     '</div>', 
 
    data() { 
 
     return { 
 
      modalClass: 'modal' 
 
     } 
 
    }, 
 
    props: { 
 
    \t isActive: { type: Boolean, default: false } 
 
    } 
 
}); 
 

 
new Vue({ 
 
    el: '#root', 
 
    data() { 
 
     return { 
 
     isActive: false, 
 
     } 
 
    }, 
 
    methods: { 
 
    showModal() {this.isActive = true }, 
 
    } 
 
});

.is-active { 
 
    color: red; 
 
}

<script src="https://vuejs.org/js/vue.min.js"></script> 
 

 
<div id="root"> 
 
    <modal :is-active="isActive"></modal> 
 
    <button @click="showModal">Show Modal (going red when prop isActive is true)</button> 
 
</div>