Just starting out with Vue.js 2 and I'm really enjoying it so far despite being new to it. Currently using the latest version.
I've begun working on my first larger application and ran into a scenario right off the bat where I have a main app component with 2 different sibling components nested inside.
<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>
This is how Comp1 is structured:
<template>
<div>
<ul>
<li @click="doClick(data)">Component 1</li>
</ul>
</div>
</template>
<script>
export default
{
data: function()
{
return {
data: 123
}
}
}
</script>
...and here's 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>
I want to trigger the doClick event on Comp1 and handle it in Comp2. What would be the most efficient way and best practice to achieve this? Is Vuex necessary or can events be emitted instead?