talking to components child to parent and parent to child vue.js - vuejs2

Question

I am coming from an angular mindset and now I am trying to learn vue.js. I am using webpack and I have the following three .vue classes.
CounterDisplay.vue, IncrementButton.vue, andApp.vue. I want to increment thecountvariable but all it does isconsole.loghow 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 amoduleand in there you put your components and services etc. How doesvue` 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>
This is the output:

Answer 1

As you said:
. I am trying to figure out how child to parent and parent to child work
This is how you do it:
Set up a counter data property in App.vue
Emit an event using vm.$emit() in IncrementButton.vue component on every button click
Set up an event listener on this component increment and execute the method whenever this event is emitted
In the event call back method increase the counter by 1
Send the counter property as a prop to **CounterDisplay.vue
App.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>
--------------------
Since the two components are non parent-child components the simple scenario would be using an EventBus
Declare an EventBus which is nothing more than an empty Vue instance in your main.js file
export const EventBus = new Vue();
The only focus of this empty vue instance is to listen and respond to events from components
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>
Now setup an listener for btn-clicked event in created hook of 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>
Note: As you want to know the correct pattern for a large app, I would recommend using vuex