I have a Object instance that looks like this:
class Engine {
id = 0;
crankRPM: = 200;
maxRPM = 2400;
numCylinders = 8;
maxOilTemp = 125;
isRunning = false;
start() { ... }
stop() { ... }
}
Now, I need to create an engine component.
Vue strongly discourages mutating the state of a property in any child component so now I need to follow this approach:
Here is the engine-ui Component definition:
<template>
<card> // Visual styling omitted
{{ engine.id }}
<input :value="engine.crankRPM" @input="$emit('changeCrankRPM', $event.target.value)"></input>
<input :value="engine.maxRPM" @input="$emit('changeMaxRPM', $event.target.value)"></input>
<input :value="engine.numCylinders" @input="$emit('changeMumCylinders', $event.target.value)"></input>
<input :value="engine.maxOilTemp" @input="$emit('changeMaxOilTemp', $event.target.value)"></input>
<toggle type="toggle" :value="engine.isRunning" @input="$emit('changeIsRunning', $event.target.value) </toggle>
</card>
</template>
<script lang="ts">
import { Engine } from "src/code/Engine";
import { defineComponent } from "vue";
export default defineComponent({
name: "engine-ui",
props: {
engine: {
type: Engine,
required: true,
},
},
});
</script>
Usage in parent component:
<template>
...
<engine-ui :engine="myEngine"
@changeCrankRPM="myEngine.crankRPM = $event.target.value"
@changeMAxRPM="myEngine.maxRPM = $event.target.value"
@changeNumCylinders="myEngine.numCylinders = $event.target.value"
@changeOilTemp="myEngine.maxOilTemp = $event.target.value"
@changeIsRunning="myEngine.isRunning = $event.target.value"/>
...
</template>
This method leads to verbose and clunky code. If there are many fields in the Engine class, it becomes cumbersome to manage in every parent component using engine-ui as it creates a large block of text.
What is the most efficient way to design this interaction?
If modifications are made to the Engine class, updates must be made to the engine-ui component and every instance in any parent component since emits are processed as strings.