First off, I should say that I'm fairly new to Vue.js 2, but so far I love it. I'm using the latest version.
I have started to build my first bigger application but got into a situation right away, where I have a main app component and 2 different sibling components inside the app component.
<template>
<div>
<comp1></comp1>
<comp2></comp2>
</div>
</template>
<script>
import Comp1 from './Comp1'
import Comp2 from './Comp2'
export default
{
components:
{
Comp1,
Comp2
},
data: function()
{
return {
}
}
}
</script>
Here is how Comp1 looks like:
<template>
<div>
<ul>
<li @click="doClick(data)">Component 1</li>
</ul>
</div>
</template>
<script>
export default
{
data: function()
{
return {
data: 123
}
}
}
</script>
...and here is Comp 2:
<template>
<div>
<ul>
<li>Component 2: { newData }</li>
</ul>
</div>
</template>
<script>
export default
{
data: function()
{
return {
newData: null
}
},
methods:
{
doClick(data)
{
this.newData = data;
}
}
}
</script>
What I would like to do is, fire the doClick event on Comp1 and handle it on Comp2.
What's the most effective was and best practice to achieve the desired result? Do I need Vuex or just need to emit events somehow?
