I noticed that in Vue you could change object fields passed as Props, and it changes these fields in parent.
Is this a bad technique? Should it be avoided, or it may be used? What the caveats of this approach?
Example:
Parent.vue:
<script setup>
import { reactive } from 'vue';
import ChildInput from "./Child.vue";
</script>
<script>
const myObj = reactive({'val':'Default text'});
</script>
<template>
<ChildInput :passedObj="myObj" />
<div>
It's a parent input:
<input v-model="myObj.val">
</div>
</template>
Child.vue:
<script setup>
const props = defineProps({
passedObj: {
type: Object,
required: true,
},
})
const dropValue = function() {
props.passedObj.val = "Changed text";
}
</script>
<template>
<div>
<label>
It's a child input:
<input v-model="passedObj.val">
<button @click="dropValue">Change text</button>
</label>
</div>
</template>
You can check this example here.
Shallow prop mutation is prohibited because props object is read-only.
Deep prop mutation is a bad practice that should be avoided. One reason is that this makes data flow more complicated and hard to follow, that this happened unconsciously in this case explains why this is a problem. Another possible reason is that the performance can potentially be affected because this scenario lies outside the common use, although I'm unaware of such optimization problems as of now.
The official recommendation is to use v-model two-way binding when props need to be mutated, so the mutation happens in parent component and can be tracked through Vue events when debugging is needed. When a prop is deeply mutated, it's cloned in a child and emitted to a parent.
So it seems that it is a bad practice. I'll leave an alternative that I use myself, if someone needs one written with Composition API.
If you want to modify only certain fields of a prop, you can use computed variable with setter and getter. Like this.
In parent:
<script setup>
import { reactive } from "vue";
import InteractiveTable from "./Child.vue";
// Reactive object, which contains our data
const myObj = reactive({
data: [{name: "Sasha", address: "Middle of nowhere"}]
});
</script>
<InteractiveTable v-model="myObj" />
Remember that you may pass multiple v-model with custom titles: v-model:title. You can also instead listen for events by yourself. Like that:
<InteractiveTable :passedObj="myObj" @update:passedObj="(data) => <something>" />
In child:
import { computed } from "vue";
// Defining our props
// For v-model default prop is 'modelValue'
// Don't forget to assign it to a variable
const props = defineProps({
modelValue: {
type: Object,
required: true,
},
});
// Emits must be assigned to a variable too
const emit = defineEmits([
"update:modelValue",
]);
// our computed variable, which we will use in JS instead of prop
const localData = computed({
get() {
// note that we can use object itself or any of its properties, 'data' in this case
return props.modelValue.data;
},
set(val) {
emit("update:modelValue.data", val);
},
});
Now you can do:
const addRow = function (name, address) {
// You have to call this localData with .value
// In all other regards you can treat it as a normal variable
localData.value.push({
'name': name,
'address': address,
});
};
You can read more about computed variables here and about emit here.
I'm pretty new in Vue.js, so if you notice something wrong in my code, please notify me in comments.