Is there a way for two single file components to communicate with each other?
Consider this scenario: I have two components, Content.vue and Aside.vue
I want to be able to trigger an update in the Content.vue component when a button inside Aside.vue is clicked.
This is how the two single file compontents are structured inside the index.html:
<div class="container articleContainer">
<article-content></article-content>
<article-aside></article-aside>
</div>
Aside.vue:
<template>
<aside>
<span @click="updateCounter">This is an aside.</span>
</aside>
</template>
<script>
export default {
data() {
return {
aside: "aside message"
}
}
}
</script>
Content.vue
<template>
<article>
<p>{{ counter }}</p>
<button @click="updateCounter">Update Counter</button>
</article>
</template>
<script>
export default {
data() {
return {
counter: 0
}
},
methods: {
updateCounter: function() {
this.counter = this.counter + 2;
},
}
}
</script>
If a user clicks on the span element inside the Aside template, how can we leverage the updateCounter method to modify the counter value within Content.vue?