Consider a scenario where there is a Vue component structured like the following:
Vue.component('child-comp',{
props:['name', 'val'],
data: function(){
return {
picked: ''
}
},
template: '<div><input type="radio" :name="name" :value="val" v-model="picked"><slot></slot></div>'
});
Additionally, there is a Parent vue instance defined as:
new Vue({
el: '#app',
data: {
message: 'Hello'
}
});
Within the HTML structure:
<div id="app">
<child-comp name="fruits" val="apple">Apple</child-comp>
<child-comp name="fruits" val="banana">Banana</child-comp>
<child-comp name="fruits" val="cherry">Cherry</child-comp>
<p>{{ picked }}</p> <!-- this throws an error -->
</div>
The question arises on how to effectively pass the picked property from the child component to the root instance without initiating an $emit event. It seems excessive to trigger an event for accessing a simple property like {{ picked }}. Is there an alternative approach to directly access and display {{ picked }} within <p>{{ picked }}</p>?