プロパティの詳細VUE成分の一部3つのコアコンセプト

参考https://mp.weixin.qq.com/s/GqIR5XrtlYVEF70q1lkDag

自分自身を追加

親コンポーネント

<テンプレート> 
  の<divクラス= "ラッパー"> 
    <ボタンをクリック@ = "変更">我是父组件</ button>の
    <div>の{{msg.name}} </ div> 
    <divのクラス= "リスト1"> 
      <リスト1、V-ショー= "isShow"：isShow.sync = "isShow"：msg.sync = "MSG" /> 
    </ div> 
    <divのクラス= "リスト2"> 
      <LIST2 /> 
    </ div> 
  </ divの> 
</テンプレート> 

の<script> 
からインポートリスト1 './list1.vue' ; 
以下からの輸入LIST2 './list2.vue' ; 
輸出デフォルト{ 
  コンポーネント：{ 
    リスト1、
     falseに、
      MSG：{ 
        名： '私はMSG親要素' 、
        ID： '親1' 
      } 
    }; 
  }、
  時計：{ 
    MSG：{ 
      ハンドラ（OLDNAMEでNEWNAME）{ 
        にconsole.log（「親コンポーネント' 、NEWNAME）; 
      }、
      即時：trueに、// 真、最初の負荷は、データ値の内部に、実際には、監視される 
      深い：trueに // 深さのモニタリング、監視することができ、同様vuexあるオブジェクトの属性を変更します
    } 
  }、
  計算：{}、
  メソッド：{ 
    変更（）{ 
      この！= .isShow この.isShow;
      この.MSG = { 
        名： '我是父组件的MSG' 、
        ID： '父级1' 
      }。
    } 
  }、
  作成（）{}、 
  （）{} 搭載
}。
</ SCRIPT> 
<スタイルスコープのlang = '未満'> 
.wrapper { 
} 
.list1、
.list2 { 
  幅： 100％ 。
  高さ：100pxに。
  // 背景：オレンジ; 
  表示：フレックス。
  テキスト - 揃える：センター; 
  整列 - アイテム：センター; 
  フォント - サイズ：20ピクセル; 
  正当化 -内容：センター; 
}
 </スタイル>

コードの表示

サブコンポーネント

<テンプレート> 
  の<divクラス= "ラッパー"> 
    我是リスト1
    の<input type = "ボタン"値= "点我隐身" @をクリック= "upIsShow"> 
    "我MSG点"の<input type = "ボタン"値= @ = "changeMsg">クリック
  </ DIV> 
</テンプレート> 

<スクリプト> 
輸出デフォルト{ 
  {}、：コンポーネント
  小道具：{ 
    MSG：{ 
      タイプ：オブジェクト
    } 
  }、
  データ（）{ 
    リターン{ 
      msg_son：{ 
        名：「我を是子组件的MSG」、
        ID： '子级1' 
      } 
    }。
  }、
  見て：
    upIsShow（）{ 
      これは $発する。（ '更新：isShow'、偽）。
    }、
    changeMsg（）{ 
      これは。$（ '更新：MSG'、出射この.msg_son）を、
    } 
  }、
  作成（）{}、
  {）（搭載
    // はconsole.log（this.msg）。
  } 
}。
</ SCRIPT> 
<スタイルスコープ> 
.wrapper { 
}
 </スタイル>

コードの表示

1：小道具

最高のこのタイプのオブジェクト型で書かれた、より厳密な

事実上の2は、通信と彼の息子のコンポーネントを示していますが、同期より

サブアセンブリは、データを変更し、同期親要素の役割を更新したいです。

分析：小道具で受信するためのサブアセンブリ、サブアセンブリへのv-バインド普及によりMSGに親コンポーネント、パラメータの親コンポーネントを取得し、その後、サブアセンブリのイベントトリガー、$イベントをバインドするために発する、あなたは価値の広がりを置くことができます親コンポーネント種;

ここでは、この$との理由から発する（「更新：isShow」、偽）;この場合、親コンポーネントが単純化されたシンタックスシュガー.sync作られているため。

詳細な説明は、参照を同期することができますhttps://www.jianshu.com/p/d42c508ea9de

プロパティの詳細VUE成分の一部3つのコアコンセプト

おすすめ