深い理解VUEの.sync修飾子

VUE .syncが使用されている通常の開発では、シンタックスシュガーをシンプルな「結合双方向」を実装するためです。

支柱親サブアセンブリを更新するために流下ではなく、その逆になります。プロップは結合、一方向ダウンリンクVUEです。しかし、いくつかのケースでは、我々は支えるために必要な「結合双方向の。」今回、.syncを解決するために使用することができます

.sync使い方

<ドキュメント、テキストベース：title.sync = 「doc.title 」 > </テキストドキュメント> 

：サブアセンブリは、明示的に更新イベントをトリガする必要があるタイトルの値は、更新する際に
、この。$ EMIT（「更新：タイトル"、newValueに）

サブタイトル・コンポーネントの更新内のこのような特性は、親コンポーネントも達成するために知覚できる「結合双方向」を

.syncは例を出荷する必要があります

<テンプレート> 
    の<div クラス = " 詳細" > 
        <myComponentという：show.sync = ' valueChild 'スタイル= " パディング：30px 30px 5pxの20ピクセル;国境：1pxの固体#ddd;マージン下：10pxの; " > </ myComponentという> 
        <ボタン@クリック= " changeValue " >トグル</ボタン> 
    </ div> 
</テンプレート> 
<スクリプト> 
輸入ヴュから ' VUE ' 
Vue.component（' myComponentという' 、{ 
      テンプレート：` <divのV- 場合 =" ショー" > 
                    <P>はデフォルトの初期値{{ショー}}などが表示される</ P> 
                    <ボタン@ click.stop = " closeDiv " >閉じる</ボタン> 
                 </ div> `、
      小道具：[ ' ショー' ]、
      方法：{ 
        closeDiv（）{ 
          この $ EMIT（。' アップデート：ショー'、falseに）; // 入力イベントをトリガして、新しい値を渡す
        } 
      } 
}）
エクスポートデフォルト{ 
    データ（）{ 
        リターン{ 
            valueChild：真、
        } 
    }、
    メソッド：{ 
        changeValue（）{ 
            この .valueChild =！この.valueChild 
        } 
    } 
}
 </ SCRIPT>

イベントがトリガされていない場合、これは$発する（「更新：ショー」、false）を;。ショーの内部コンポーネントは、まだ戻って、一度開くようにクリックして、リードフレームを再生し、この値がtrueであるとしていないと思う外部サブ感知できない変化がそれが表示されます。