Как передать объект НЕ по ссылке из родительского компонента в дочерний?

Question

[Влад Токарев]

Можно ли как-нибудь передать объект дочернему компоненту через props, чтобы изменение объекта в дочернем компоненте не влияло на объект в родительском, а изменение в родительском влияло на объект в дочернем, т.е. чтобы логика работы была такая же, как и с простыми типами переменных?
Если нельзя, то может есть другие варианты решения.

Answer 1

[Evgeny Kulakov]

Если я вас правильно понял, то можно так:

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

В дочернем элементе:

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

Т.е. в дочернем компоненте вы создаете новый объект на основе входящего. Далее его можно использовать внутри компонента как вам нужно.

Comments

[Влад Токарев]

Единственное, это не решает проблему, когда меняется свойство у родителя - у дочернего ничего не изменится.

[Evgeny Kulakov]

Можно вот так попробовать: codepen.io/kerf/pen/RVbrmm

[Влад Токарев]

Evgeny Kulakov: спасибо, то, что надо