子コンポーネント経由で親データを更新していますか？

Question

子コンポーネントを介して親データを更新する正しい手順は何ですか？

子コンポーネントで - 親データをpropsで直接変更しています。これが間違っているのかどうかはわかりません。 VUEドキュメントによると

：親プロパティの更新は、それが子供に流れ落ちます

、しかし ない他の方法で回避。

例の子コンポーネント：

<script> 
    export default { 

     props: ['user'], 

     data: function() { 
      return { 
       linkName: '', 
       linkValue: '', 
      } 
     }, 

     methods: { 
      addLink: function (event) { 
       event.preventDefault(); 
       this.$http.post('/user/link', {name: this.linkName, key: this.linkValue}).then(response => { 
        this.user.links.push(response.data); 
       }, response => { 
         // Error 
        } 
       }); 
      }, 
     } 
    } 
</script> 

あなたは間違いなくpropsがされるものではなく、言ったように私はprops: ['user']

Answer 1

を経由して親コンポーネントに直接データを修正するthis.user.links.push(response.data);を使用していました子から親にデータを渡します。データバインディングは単方向のみです。

正しい手順は、子コンポーネントが$ emitを介して親コンポーネントに何らかの値（オプション）でイベントを送信することです。あなたのケースでは

、あなたは子コンポーネントのaddLink方法で次の操作を行うことがあります。

this.$http.post('/user/link', {name: this.linkName, key: this.linkValue}).then(response => { 
    this.$emit("update-user-links", response.data); // Send an event to parent, with data 
}, response => { 
    // Error 
}); 

そして、次のようにあなたの親はそれを聞くことができます。

<my-user-link-component :user="userData" v-on:update-user-links="addUserLink"></my-user-link-component> 

または短期の手を構文：

<my-user-link-component :user="userData" @update-user-links="addUserLink"></my-user-link-component> 

上記では、メソッドを割り当てています子コンポーネントのイベントを処理します。

が

• あなたの親コンポーネントを無視するように選択することができます。上から下とイベントメカニズムに結合する。この片道の

  methods: { 
      // ... your other methods, 
      addUserLink: function(linkData) { 
       this.userData.links.push(linkData); 
      } 
  } 
  

  利点：あなたの親コンポーネントでは、次のようにこのメソッドを定義する必要があります必要に応じてイベントを生成し、子コンポーネントを他のコンテキストで再利用可能にします。

• あなたの子コンポーネント（あなたが多いと仮定します）は、イベントを上位に送信することが許可されます。これは、親ステートを直接変更する場合と比べてデバッグしやすくなります。