- Create prop in child component:
props: { childDataProp: { type: Array, default () => []}} - Create a data variable:
data(){ return {childData:[]};} - Populate value for the data variable created above.
childData = [1,2,3,4,5]; - Use $emit to expose an event as the first argument and data as the second argument:
this.$emit(‘eventName’,childData); - In Parent Component:
a. In return object create a variable
data(){
parentData:[]
}
b. set emitted eventName to the child component’s v-on binding directive like: v-on:eventName
c. assign an event to the binding, set in step b like this: v-on:eventName=”onEvent”
c. define onEvent as a method in parent component and pass the data array passed in step 4 (this.$emit(‘eventName’,childData);)
methods:(){
onEvent(childDatachildData){}
}
d. set someData to the data passed into onEvent method
methods:(){
onEvent(childData){
this.parentData = childData;
}
}
And you should be able to use this.parentData in parent component