同期のVUE使い方

注意してこのキーワードは、V2.3.0の+で新しく追加された  .sync 修飾子が  v-bind 表現で使用することはできません（例えば  v-bind:title.sync=”doc.title + ‘!’” 、有効ではありません）。明らかに、彼は、データが変化する親コンポーネントサブアセンブリの方法であるが、個人的には注意して使用すべきであると感じ、それ以外の場合は容易成分データを汚染隠れ危険性があります

あなたがサンプルコードを実行することができ、参照VUEのdevのツールは、理解します

father.vue：

<テンプレート>
  <DIV CLASS = "こんにちは">

    // 入力値をリアルタイムに変更し、リアルタイムでのボックスの内容を変更WRD
    <input type = "text" Vモデル= "WRD">
    <時間> 
    これは名前である --- {SNAME {}}
     <！ -書き込み同期は、親コンポーネントサブアセンブリに書き込まれた一方向パスの値に、親コンポーネントのデータを更新しません- >
    <ボックス：word.sync = "WRD"：sname.sync = "SNAME"> </箱>
  </ div>
</テンプレート>

<スクリプト> 
インポートボックスから「./child.vue」   // 導入ボックスサブアセンブリ 
エクスポートデフォルト{
  名前： 'HelloWorldの' 、
  データ（）{
    リターン{
      WRD： '' 、
      オフ： 'Z' 、
      年齢： 12
    }
  }、
  成分：{
    ボックス
  }  
}
</ SCRIPT>

child.vue

<テンプレート>
  <DIV CLASS = "こんにちは">
    <DIV CLASS = "IPT">
      <時間>
      ---------------------------------------------
      <BR>
      <input type = "text" Vモデル= "STR">
    </ div>

    // 単語は親要素が渡されます
    <BR>
    <H2> {{単語}} </ H2>
    <BR>
    // また、SNAME
    <BR>
  <H2> {{SNAME}} </ H2>
  </ div>
</テンプレート>

<スクリプト> 
輸出デフォルト{
  名前：「ボックス」、
  データ（）{
    リターン{
      STR： '' 、
    }
  }、
  小道具：{
    単語：{
      タイプ：文字列、
      デフォルト：「」
    }、
    オフ：{
      タイプ：文字列、
      デフォルト： 'ls'に
    }
  }、
  見ます：{
    STR：機能（newValueに、OLDVALUE）{
       // イベント更新送信STRの値が変化するたび：SNAME、および過去に渡された値を、その後、親要素のデータ値を変更
      この。$ EMITを（「更新：SNAME」、 ; newValueには）
       // 値は、オブジェクトの複数を使用したくない場合は、複数回EMIT 
      これ。「1' ： 'Wordの更新'、newValueに+ $ EMITを（）;
    }
  }
}
</ SCRIPT>