Как обновляется этот файл `layout` без`: layout.sync`?

Question

Я не понимаю, как vue-grid-layout удается изменить myLayout в следующей кодовой песочнице :

<grid-layout
  :layout="myLayout"
  ....
>

Я думал, что:

<MyComponent :layout="myLayout"/>

Имеется в виду, что любые изменения в myLayout здесь, в родительской области, станут изменениями в layout реквизите в MyComponent, но MyComponent не сможет изменить myLayout.

Для чего и использовался модификатор синхронизации , так что

<MyComponent :layout.sync="myLayout"/>

будет эквивалентно:

v-bind:layout="myLayout"
v-on:update:layout="myLayout = $event"

И поэтому без .sync компонент не сможет изменить реквизит в родительской области.

Но песочница с кодом демонстрирует, что vue-grid-layout удается изменить myLayout, используя только :layout="myLayout".

(:layout.sync="layout" используется в коде README для vue-grid-layout , и тогда я понимаю, как этоработает, но работает и без .sync, чего я не понимаю.)

Что мне не хватает или недоразумение?

Answer 1

В объектах javascript передаются по ссылке, если вы должны поддержать объект, клонировать его и манипулировать клоном, чтобы избежать его обновления исходного объекта.

, например:

props: {
    myLayout: Object
},

data() {
    return {
        layout: {}
    }
},

watch: {
    myLayout: {
        handler(myLayout) {
            this.layout = { ...myLayout };
        },
        immediate: true
    }
}