Vueの研究ノート - スコープスロット

時には我々は、コンテンツがこの時点でサブアセンブリデータ親コンポーネントがアクセス権を持っていないどのように表示する親サブアセンブリ構成要素によって決定されることを願って、キーポイントは、サブアセンブリからスロットの転送を受けると、スロットの範囲、親コンポーネント可能ですパラメータを超えます。

< 本部ID =「アプリケーション」> 
    < CPN > </ CPN > 
    < CPN > 
        <！ - 目的は、サブアセンブリの親形態に係るデータと表示を得ることを目的とする成分の所望- > 
        <！ - 送信スロットを得るためにデータ上、テンプレートでなければならない> - 
        < テンプレートスロットスコープ= "スロット" > 
            <！ - <-span用V = "アイテムslot.dataで">アイテム{} {} - </スパン> - > 
            < スパン> {{slot.data.join（ ' - '）}} - </ スパン> 
        </ テンプレート> 
    </ CPN >

</ DIV >

< テンプレートID = "CPN" > 
    < divのスタイル= "表示：フレックス、フレックス方向：行" > 
        < スロット：データ= "planguage" > 
            < UL > 
                < リチウムのV-ため= "planguageの項目" > {{項目}} </ 李> 
            </ UL > 
        </ スロット>

    </ DIV >

</ テンプレート>

</ ボディ> 
< スクリプトSRC = "https://cdn.jsdelivr.net/npm/vue/dist/vue.js" > </ スクリプト> 
< スクリプト> 
    CONST CPN = {
        テンプレート：' #cpn ' 、
        データ（）{
            リターン{
                planguage：[ ' 1111 ' 、' 2222 ' 、' 3333 ' 、' 4444 ' ]
            }
        }
    }
    constのアプリ=  新しいヴュー（{
        上：' #app ' 、
        成分：{
            CPN
        }
    }）
</ スクリプト>

サブアセンブリたちの親コンポーネントを使用する場合は、サブアセンブリからデータを取得：
私たちは、<テンプレートスロットスコープ=「スロットによって得られた 」> スロットにプロパティ
我々だけで合格したデータを取得することができslot.dataによって

Vueの研究ノート - スコープスロット

おすすめ