談論組件兒童父母和孩子的父母vue.js

Question

我來自一個角度的心態，現在我想學習vue.js.我正在使用webpack，並且我有以下三個.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. 建立一個counter數據財產App.vue
2. 的Emit使用vm.$emit()的活動IncrementButton.vue每個按鈕點擊組件
3. 在此組件上設置事件偵聽器increment並執行回叫方法通過1​​
4. 增加計數器每當這個事件被髮射
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

聲明一個EventBus，它只不過是你的main中的一個空Vue實例。js文件

export const EventBus = new Vue(); 

這個空VUE實例的唯一重點是聆聽和組件

響應事件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 
      //Syntax is EventBus.$emit('event-name', eventData); 
      EventBus.$emit('btn-clicked', 1); 
     } 
     } 
    } 
</script> 

<style scoped></style> 

現在設置爲btn-clicked事件的監聽器創建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