関係要素-UIのスロット理解

概要:いくつかのフロントエンドユースケースを見ると、早けれ学習の理解として、スロット-scope属性を参照して、スロットに理解できる、結果は道を理解していないのスロットスコープ感を襲ったので、再び、私は少しの勉強を参照してください。

最初のスロット:コンテンツのサブコンポーネントに書き込まれた親コンポーネント・タグ、サブアセンブリスロットラベルを交換

1  // 
2 <テンプレート>
 3    <DIV CLASS = "父">
 4      <子>
 5        <div>タグの内容</ div>       サブアセンブリで書か//タグ、ラベルスロットサブアセンブリを置き換えます。 ....ここで<テンプレート>とすることができる、小さなラベルがあってもよく、テキストであってもよい
。6      </子供>
 7    </ div>
 8 <テンプレート>
 9  
10  // 
。11 <テンプレート>
 12である    <DIVクラス= "子">
 13である      の<slot> </スロット>      親コンポーネントのコンテンツによって提供される//ソケットサブアセンブリ予約空間、         
14    </ div>
 15 <テンプレート>
16  
。17  // 合成さ
18<DIV CLASS = "父">   // 親コンポーネント
。19    <DIV CLASS = "子">   // サブアセンブリ
20は      、<div>タグの内容</ div>    //が置き換えスロット
21がある    </ DIV>
 22れています </ DIV>

上記コンテンツは、スロットのサブアセンブリのヘッドスペースに複数製造することができるスロットの方法です。

// スロットに挿入されるように指定された 
<DIVスロット= "SLOT1">タグの内容。1 </ div> 
<DIV =スロット"スロット2">タグの内容2 </ div> //がスロット命名され 
<スロット=名"SLOT1"> </スロット> 
<名前=スロット"SLOT2、"> </スロット>

スロット範囲は、データ転送のような小道具の感覚のために使用され、比較的複雑です

シーン記述を提供します:

教師が調査分析レポート行う必要があります(:親コンポーネントを、報告:表示部)

学生が行うために彼は空白のままBの形と統計(B:サブコンポーネント、フォーム統計:表示セクション)

要件は、最後の行は、テーブルに書き込み分析結論を空白のままにする(ブランク:スロット、分析の結論:タグの内容)

一方、A Bはまた、結論(:データサブコンポーネントが返さ統計結果)を書き込むために統計情報を提供します

// 親要素 
<テンプレート> 
  <DIV CLASS = "父">          // 教師レポート 
    <子供>                       // 生徒B形 
        の<divスロットスコープ= "レスポンス"> // 教師結論
          統計結果:{{応答。 }}データ
         </ DIV> 
    </子> 
  </ div> 
</テンプレート> // サブアセンブリ 
<テンプレート> 
  の<divクラス= "子">           // 学生テーブルB 
     <スロット:データ= "結果" > </ スロット>    //教師結論 
  </ DIV> 
</テンプレート>

解釈; Sunがスロットアセンブリを想像し、サブアセンブリは、任意のコンポーネント太陽にデータを送信することができます。

すべてのサブコンポーネントの背後にあるスロットは名前のこの全体のオブジェクトのためのスロットスコープとサン、Sunのコンポーネントのコンポーネントにデータオブジェクトにパッケージ化されますので、ここで再び、1日のコンポーネントは、小道具を書いていません

<DIVスロットスコープ= "XXX"> 
{{}} xxx.info.name的学校是{{xxx.school.name}}
 </ div> 

<スロット:情報= "人":学校= "学校"> </スロット>

おすすめ

転載: www.cnblogs.com/aLandon/p/11592596.html
おすすめ