コンポーネントと話す子どもと親子、親子から子どもまでvue.js

Question

私は角度のある考え方から来ていて、今はvue.jsを学びたいと思っています。私はwebpackを使用しており、私は次の3つの.vueクラスを持っています。 CounterDisplay.vue、IncrementButton.vue , and App.vue . I want to increment the count variable but all it does is console.log how many times I pressed the button. I am trying to figure out how child to parent and parent to child work in vue. Then I need to figure out the correct pattern to use vue in a very large application. In angular you have a module and in there you put your components and services etc. How does vue` do this？

CounterDisplay.vue

<template> 
    <div id="#counterDisplay"> 
    {{count}} 
    </div> 
</template> 

<script> 
    export default { 
    data() { 
     return { 
     count: 0 
     } 
    } 
    } 
</script> 

<style scoped> 

</style> 

IncrementButton.vue

<template> 
    <button @click.prevent="active">+1</button> 
</template> 

<script> 
    export default { 
     methods: { 
     active() { 
      console.log('+1 Pressed') 
     } 
     } 
    } 
</script> 

<style scoped></style> 

App.vue

<template> 
    <div id="app"> 
    <h3>Increment:</h3> 
    <increment></increment> 
    <h3>Counter:</h3> 
    <counter></counter> 
    </div> 
</template> 

<script> 
    import Counter from './components/CounterDisplay.vue' 
    import Increment from './components/IncrementButton.vue' 
    export default { 
    components: { 
     Counter, 
     Increment 
    } 
    } 
</script> 

<style> 
</style> 

Answer 1

はあなたが言ったように：

これが出力されます。私は子供の親と親の子は、あなたがそれを行う方法これは

どのように機能するかを把握しようとしています：

1. はApp.vue
2. エミットにcounterデータプロパティを設定しますvm.$emit()をIncrementButton.vueで表示するボタンごとにコンポーネントをクリック
3. このコンポーネントにイベントリスナーを設定してincrementこのイベントは、イベントでは
4. を放出されるたびに方法1
5. によってカウンタを増やす方法コールバックは小道具としてカウンタプロパティを送信するために**** CounterDisplay.vue **

*アプリケーション。 VUE **

<template> 
    <div id="app"> 
    <h3>Increment:</h3> 
    <increment @btn-clicked="increaseCounter"></increment> 
    <h3>Counter:</h3> 
    <counter :counter="counter"></counter> 
    </div> 
</template> 

<script> 
    import Counter from './components/CounterDisplay.vue' 
    import Increment from './components/IncrementButton.vue' 
    export default { 
     data(){ 
      counter:0 
     }, 
    components: { 
     Counter, 
     Increment 
    }, 
    methods:{ 
     increaseCounter(){ 
      this.counter ++; 
     } 
    } 
    } 
</script> 

<style> 
</style> 

IncrementButton.vue

<template> 
    <button @click.prevent="active">+1</button> 
</template> 

<script> 
    import {EventBus} from './path/to/main.js' 
    export default { 
     methods: { 
     active() { 
      console.log('+1 Pressed') 
      //emitting an event 
      this.$emit('btn-clicked'); 
     } 
     } 
    } 
</script> 

<style scoped></style> 

CounterDisplay.vue

<template> 
    <div id="#counterDisplay"> 
    {{counter}} 
    </div> 
</template> 

<script> 
    export default { 
     props:['counter'], 
    data() { 
     return { 
     } 
    }, 
    } 
</script> 

<style scoped> 

</style> 

--------------------

二つの成分は非親と子コンポーネントであるため、単純なシナリオは、EventBus

あなたのメインの空のVueインスタンスに過ぎないEventBusを宣言します。JSこの空VUEインスタンスの唯一の焦点は、セットアップがbtn-clickedイベントのリスナーで今聞くとコンポーネント

からイベントに応答する

<template> 
    <button @click.prevent="active">+1</button> 
</template> 

<script> 
    import {EventBus} from './path/to/main.js' 
    export default { 
     methods: { 
     active() { 
      console.log('+1 Pressed') 
      //emitting an event 
      //Syntax is EventBus.$emit('event-name', eventData); 
      EventBus.$emit('btn-clicked', 1); 
     } 
     } 
    } 
</script> 

<style scoped></style> 

IncrementButton.vueある

export const EventBus = new Vue(); 

ファイル8 * CounterDisplay.vue **

<template> 
    <div id="#counterDisplay"> 
    {{count}} 
    </div> 
</template> 

<script> 
    import {EventBus} from './path/to/main.js' 
    export default { 
    data() { 
     return { 
     count: 0 
     } 
    }, 
    created(){ 
     EventBus.$on('btn-clicked', (eventData) => { 
      this.count = this.count + eventData; 
     }); 
    } 
    } 
</script> 

<style scoped> 

</style> 

のフックを作成しました

注：大きなアプリの正しいパターンを知りたい場合は、vuex