The child operates on its own copy of the prop data and can notify the parent using `$emit` when a change occurs.
Imagine dealing with a recursive tree structure, like a file system for example:
[
{ type: 'dir', name: 'music', children: [
{ type: 'dir', name: 'genres', children: [
{ type: 'dir', name: 'triphop', children: [
{ type: 'file', name: 'Portishead' },
...
]},
]}
]}
]}
A component called `Thing` is used recursively to handle a `childtree` prop as shown below:
<template>
<input v-model="tree.name" />
<thing v-for="childtree in tree.children" :tree="childtree" ></thing>
</template>
Modifying a name directly modifies the prop, triggering a warning from Vue.
To avoid direct prop modification, a deep copy of `childtree` would need to be made by each component. This copy would then be emitted via `$emit`, and upon receiving an input, it would copy the changes back to the original prop. This process would repeat throughout the tree, potentially causing inefficiency for larger trees.
Is there a more efficient solution to this problem? It's possible to workaround Vue warnings/errors using a trick demonstrated in this example jsfiddle.