How to pass object NOT by reference from parent component to child?

Question

Vue.js

Is it possible to somehow pass an object to a child component via props so that changing the object in the child component does not affect the object in the parent, and changing the parent affects the object in the child, i.e. so that the logic of work is the same as with simple variable types?
If not, then there may be other solutions.

Answer 1

If I understand you correctly, you can do this:

<parent>
  <child :some_prop="parent_obj"></child>
</parent>

In child element:

<script>
export default {
  props: ['some_prop'],
  data: function() {
    return {
      innerProp: {...this.some_prop}
    }
  }
}
</script>

Those. in the child component, you create a new object based on the incoming one. Then it can be used inside the component as you need.