Vue.js入門チュートリアル(10)スロット

第十章:スロット
話がある前に
スロットはvueにあるだけでなく、reactもウィジェットにも存在します.彼らの意味は実は理解しやすいです.例えば、次のように、あなたのchild自体はコンポーネントです.直接コンポーネントに内容を記入することができますか.明らかにできません.彼は最後にレンダリングするときにコンポーネントの内部の内容をレンダリングし、ラベルに書いてあるものをレンダリングしません.

    hello world

これは違います.彼はslotの中の言葉をレンダリングしてからコンポーネントをレンダリングしますが、次のspanはレンダリングされません.これで分かりますよね.slotはコンポーネントテンプレートに挿入した内容に相当します.コンポーネントレンダリングの制限を受けずに、どこに置きたいか、どこに置きたいか!これは微信ウィジェットにも存在します.

             
    hello world

Slot使用
1、コンポーネントに名前のないslotラベルが1つ以上ある場合、以下のようにします.

hello world   

出力されます:2つの赤いhello worldと、slotを使用するデフォルトの注意:slotラベルにスタイルを追加するのは無効です.名前付きスロットはslot属性を含まないラベルの内容に置き換えられず、slotのデフォルト値(名前付きslotに対応)が表示されます.
2、コンポーネントにslotスロットが複数ある場合、親コンポーネントは、次のようにサブコンポーネントの指定された位置にコンテンツまたはパラメータを表示できます.

  hello world
  hello world
  hello world
  {{otherData}}

3、作用域スロット:
サブアセンブリラベルにラベルがある場合はscopenName.を使用します.childPropはサブコンポーネントテンプレートのchildPropバインドデータを呼び出すことができるので、役割ドメインスロットは親伝参の方式であり、通常のslotがparentでchildデータにアクセスできないという問題を解決した.役割ドメインスロットの代表的な例は、parent親コンポーネント上でリストアイテムをカスタマイズできるリストコンポーネントです.このitemsのすべてのリストアイテムは、slot定義後に親コンポーネントに渡すことができます.つまり、データは同じで、異なるシーンページには異なる表示方法があります.

  
    slot