スロット（スロット）

1.スロットとは何ですか？

位置サブコンポーネントに親成分含有量によって運ばれます。VUEスロットは、出口としてのスロットラベルを通してAPIコンテンツ配信、コンテンツ配信のセットを達成することです。

スロットが表示され、親コンポーネントは、ディスプレイをサブアセンブリすることによって決定されるスロットによって決定されるものを示していません。

役割：

モジュールブロック、よりモジュールおよび再利用可能なようにします。

2、使用法：

デフォルトのスロット：

親成分：
 <テンプレート> 
    の<div> 
        <子供> 
            <INPUT：値= "値" V-モデル= "値" /> 
        </子供> 
    </ div> 
<テンプレート> 
                
データ（）{ 
    戻り{ 
        値： 123 
    }             
 } 


副成分：
 <テンプレート> 
    の<div> 
        <P> 5555 </ P> 
        値= "値" <スロット>デフォルトのコンテンツ</スロット> //この位置は、<入力される V字モデル= "値" / > 入力がない場合、デフォルトのコンテンツのサブコンポーネントが表示され、交換してください。
    </ div> 
<テンプレート>

名前付きスロット：

副成分：
 <テンプレート> 
  <DIV CLASS = "slottwo"> 
    の<div> slottwo </ div> 
    <スロット名= "ヘッダ"> </スロット> 
    の<slot> </スロット> //名前が指定されていない場合、名前はデフォルト
    <スロット名= "フッタ"> </スロット> 
  </ div> 
</テンプレート> 
親要素： <テンプレート> 
  の<div> 
    <スロット-TWO> 
      <p型>ラララ、ラララ、私は新聞を販売していました小さな専門家</ p型> 
      <テンプレートスロット=「ヘッダ」> 
          <p型>私は</ p型>のスロットヘッダの名前だ
      </テンプレート> 
      私は<スロットのフッターの名前だ<P-スロット=「フッタ」> / P> 
    </スロット-TWO> 
  </ div>
</テンプレート> // 親コンポーネントテンプレートを使用（またはテンプレートを記述しなくてもよい）スロットのサブアセンブリの名前に対応するライト目標値に、デフォルトの値とはスロットが存在しません。

スコープスロット：

テンプレート内のサブコンポーネントは、子の役割にコンパイルされるすべてのもの、すべての親コンポーネントテンプレートは、地域における親の役割をコンパイルします。

スロットの内容は、親要素内で定義されているので、あなたがサブアセンブリのデータを取得したい場合は、サブアセンブリは、スロット・スコープ、変数オブジェクトslotProps上でパスを受けすることができます。

親要素：
の<div> 
    <TODO-一覧> 
      <！ - -サブアセンブリオブジェクトを受信するためのslotProps変数が渡されたオーバー> 
        <スパンスロットスコープ= "slotProps" V- IF = "slotProps.todo.isComplete"> slotProps.todo.text} {} {</スパン> 
    </ TODO-一覧> 
</ div> 
サブコンポーネント： <UL> 
 < リチウム
  V - のため = "リストのTODO" 
  ：キー = "todo.id" 
 > 
  < ！ -私たちはそれぞれのTODOためのスロットを用意している、 - > 
  <！ - `todo`は小道具スロットとしてオブジェクトを渡します。- > 
  <スロット：TODO = "TODO"> 
  </スロット> 
 </ LI> 
</ UL>

5、使用シナリオ

<EL- ダイアログ
      ：visible.sync = "ダイアログ" 
      幅 = "400ピクセル" 
      センター > 
      <テンプレートスロット= "タイトル"> 
        <DIV CLASS = "alertTitle"> 
            <IMG SRC = "../資産/ admin.png"> ＆NBSP; ＆NBSP; <span>を编辑</ span>を
        </ div> 
      </テンプレート> 
      <EL-フォームクラス= "InputBox関数"：モデル= "editCont"ラベル幅= "100pxに"> 
        ...
       </ EL-フォーム> 
      <スパンスロット= "フッター"クラス= "ダイアログ・フッタ"> 
        <EL-ボタンタイプ= "主" @クリック= "保存">保存</ EL-ボタン>