Vue 2.4の子から親コンポーネントへデータを転送する正しい方法は？

Question

こんにちは、私はVueを使い慣れていないので、親コンポーネントの値を子コンポーネントにバインドすることについて質問したかったので、その値が子で変更されたときに親に対して変更したいと思います。

私はJS Fiddleを作成しましたが、これはどこで達成されたのかを示していますが、なぜそれが動作するのか混乱しています。オブジェクトを小道具に渡すと値がバインドされますが、そのまま渡すと「突然変異」エラーが発生します。

JS：

var demo = new Vue({ 
    el: '#demo', 
    data: { 
     Name: { firstName: "Bonjur", secondName: "Captain"}, 
     firstName: "Hello", 
     secondName: "World", 
    } 
}); 

Vue.component('working', { 
    template: '<div>' + 
     'First: <input v-model="names.firstName" />' + 
     'Second: <input v-model="names.secondName" /> ' + 
     '</div>', 
    props: { 
     names: null 
    } 
}) 

Vue.component('broken', { 
    template: '<div>' + 
     'First: <input v-model="first" />' + 
     'Second: <input v-model="second" /> ' + 
     '</div>', 
    props: { 
     first: null, 
     second: null 
    } 
}) 

HTML

<div id="demo"> 
    <working :names="Name"></working> 
    <broken :first="firstName" :second="secondName" ></broken> 
    <p> {{Name.firstName}} {{Name.secondName}} </p> 
    <p> {{firstName}} {{secondName}} </p> 
</div> 

私の当初の目標は、「デモ」Vueのオブジェクトは、私がサーバーにポストバックするつもりだったメインデータオブジェクトであり、持っていました主要な「デモ」オブジェクト内のデータの特定の部分を独自の方法で編集するいくつかのコンポーネントです。

このようにVueを使用してアプリケーションを設計する際のコメント/意見/提案は大歓迎です。

私は子供のイベントを聞いて、そのように親の価値を変えることもできると読んでいます。

この種のChild to Parentデータバインディングは、Vue js v2.4でどのように設計または意図されていましたか？

上記の例はなぜ機能しますか？

Answer 1

あなたがあるため、JavaScriptでオブジェクトを渡すときには、作業：

• オブジェクトが

あなたがチェックアウトthisが知る

プリミティブが値によって渡され、参照によって渡されます参照渡しと値渡しについて

オブジェクトを小道具として渡して子コンポーネントで変更すると、渡されたオブジェクトは、オブジェクトのメモリ位置だけが新しいオブジェクトではなく渡されるため、変更されます。

新しいコピーを作成している子コンポーネントとしてプリミティブを渡し、子コンポーネントが受け取ったとき。 brokenコンポーネントの値を変更すると、新しくコピーされた値がルートインスタンスの元の値ではなく変更されるためです。

子コンポーネントの親コンポーネントにイベントを送信する必要があります。 custom events.

イベントを使用して親から受け取った小道具を突然変異させることを推奨します。ここで

はupdated fiddle