If your single file component has grown too large and unwieldy, it might be time to refactor it, and parcel out a portion to a sub-component. In order to minimize the amount of coding in doin so things can be kept to a minimum like this:
- a new component is created, and referenced in the parent
- only the HTML is factored out in the sub-component
- all parent data gets passed to the child
- events stay in the parent element
First create a minimal new component, let’s call it list, like so:
<template>
<div>
</div>
</template>
<script>
</script>
The second step is quite simple: cut the parts you want to factor out of the parent component, and paste them in your new child component. So what in the parent component looked like this:
<table>
<!-- lots of stuff inside here -->
</table>
now becomes
<list></list>
with all the <table></table> code coing into the list component which then looks like this:
<template>
<table>
<!-- lots of stuff inside here -->
</table>
</template>
<script>
module.exports = {
}
</script>
Then you ensure that all the parent data becomes child props. If your parent data looks like this:
data: function () {
return {
parts: [],
blLookup: {},
prices: {},
skipParts: {},
updateId: 0,
totalCost: 0,
totalPieces: 0,
partCount: 0,
partsFound: 0,
config: { price: 'min', loc: 'EU', state: 'new' },
};
},
your child props will look like this:
props: {
parts: Array,
blLookup: Object,
prices: Object,
skipParts: Object,
updateId: Number,
totalCost: Number,
totalPieces: Number,
partCount: Number,
partsFound: Number,
config: Object
},
Finally, you have to edit the component so that events are called at the parent level. What in the parent component looked like this:
<td><input @change="editPart($event, p.DesignID, i)" class="designID" :value="p.DesignID"></td>
in the child components needs to be changed like this:
<td><input @change="$parent.editPart($event, p.DesignID, i)" class="designID" :value="p.DesignID"></td>
so that the event calls a function inside the parent - as opposed to inside the component.
Now the final step - referencing the sub-component inside the parent, using the path from which the component is served - obviously.
components: {
list: httpVueLoader('components/set/list.vue')
},
That’s it - you have factored out a part of your parent component in five easy steps.
