Vueのは、ケースのレビュー - データがローカルに格納されている---接点サブアセンブリ方法は、親コンポーネントを呼び出します（サブコンポーネントのポストをクリックしてください - 親コンポーネントの更新コメント一覧を呼び出します）

<！DOCTYPE HTML > 
< HTML LANG = "EN" > 

< 頭> 
  < メタ文字コード= "UTF-8" > 
  < メタ名= "ビューポート" コンテンツ= "幅=装置幅、初期の規模= 1.0" > 
  < メタHTTP -equiv = "X-UA-互換性のある" コンテンツ= "IE =エッジ" > 
  < タイトル>ドキュメント</ タイトル> 
  < スクリプトSRC = "./ libに/ VUE-2.4.0.js" > <
  RELを= "スタイルシート" のhref = "./ libに/ブートストラップ・3.3.7.css" > 
</ ヘッド> 

< 身体> 
  < div要素のid = "アプリ" > 


    < CMT-ボックス@func = "loadComments" > </ CMT -box > 


    < ulのクラス= "リスト・グループ" > 
      < 李クラス= "リストグループ項目" V-用= "リスト内の項目" ：キー= "item.id" > 
        < スパンクラス= "バッジ" >レビュー：item.user {{}} </ スパン>
        {{item.content}} 
      </ 李> 
    </ UL > 


  </ DIV > 


  < テンプレートID = "TMPL" > 
    < DIV > 

      < DIV クラス= "フォームグループ" > 
        < ラベル>评论人：</ ラベル> 
        < 入力タイプ= "テキスト" クラス= "フォームコントロール" V-モデル= "ユーザ" > 
      </ DIV > 

      < DIV クラス= "フォーム基"> 
        < ラベル>评论内容：</ ラベル> 
        < TEXTAREAのクラス= "フォームコントロール" V-モデル= "コンテンツ" > </ TEXTAREA > 
      </ DIV > 

      < DIV クラス= "フォームグループ" > 
        < 入力タイプ= "ボタン" 値= "发表评论" クラス= "BTN BTN-プライマリ" @click = "postComment" > 
      </ DIV > 

    </ DIV > 
  </ テンプレート> 

  < スクリプト>

    たcommentBox = {
      データ（）{ 
        リターン{ 
          ユーザー：'' 、
          内容：'' 
        } 
      }、
      テンプレート：' #tmpl ' 、
      メソッド：{ 
        Postcomment（）{ // メソッドのコメント
          @ 分析：コメントのビジネスロジック
          // 1コメントデータメモリは行きますか？？？localStorage.setItem保存するためのlocalStorage（「CMTSを」、「」）
          // 最新のデータオブジェクトの見直しを整理する2. 
          // 3.方法を見つけ、第二段階は、オブジェクトがのlocalStorageに保存し、コメントを得ることです：
          //   3.1のlocalStorageは、文字列データのみの保存をサポートし、最初のJSON.stringifyを呼び出す
          //  3.2最新コメントのlocalStorage前に最初にデータを保存する前に配列オブジェクトに変換されたデータ（文字列）を確認するために取得し、最新のコメントは、配列にプッシュ
          //   のlocalStorageで取得した場合は3.3コメント文字列が存在しない、あなたは「[]」JSON.parseを変換するために聞かせてに戻ることができます空である
          //   、再び文字列の配列にJSON.stringifyを呼び出し、3.4リスト最新コメントの配列を、その後（localStorage.setItemを呼び出します）

          VaRのコメント= {ID：Date.now（ユーザー）：この.user、内容：この.content} 

          // のlocalStorageからすべてのコメントを取得
          するvar 一覧= JSON.parse（localStorage.getItem（' CMTSを' ）| |  「[] 」）
          list.unshift（コメント）
          // 再セーブ最新のデータのコメント
          localStorage.setItem（' CMTS ' 、JSON.stringify（リスト））

          この.user =  この.content =  '' 

          // this.loadComments（）// ????? 
          これ。$ EMIT（' FUNC ' ）
        } 
      } 
    } 

    // ViewModelに与えることを、Vueのインスタンスを作成します。
    VAR VM =  新しい新しいヴュー（{ 
      EL：' #app ' 、
      データ：{ 
        リスト：[ 
          {ID：Date.now（）、ユーザ：' 白' 、コンテンツを："私は持って生まれています「}、
          {上記ID：Date.now（）、ユーザー：」江白「内容：」ワインのグラスを行うことをアドバイスは「}、 
          ：：Date.now（）、ユーザー{上記のIDを述べた」小さなMA 「コンテンツ：」私は馬、牛や羊の風掃引牧草地、馬の名前' } 
        ] 
      }、
      beforeCreate（）{ // 注意：この方法は、このため、フック関数の実装では、loadCommentsと呼ぶことができない、データ及び方法良い初期化されていない

      、} 
      {）（作成された
        この.loadComments（）
      }、
      {：メソッド
        loadComments（）{ // ローカルのlocalStorageから、ロードのコメント一覧
          VARリスト= JSON.parse（localStorage.getItem（'のCMTS ' ）||  ' [] ' ）
           この.LIST = リスト
        } 
      }、
      コンポーネント：{ 
        ' CMT-ボックス' ：commentBox 
      } 
    }）。
  </ スクリプト> 
</ ボディ> 

</ HTML >
おすすめ
