? 1、作用:讓父組件可以向子組件指定位置插入html結(jié)構(gòu)吏夯,也是一種組件之間通信的方式此蜈,
???????????????????? 適用于 父組件===>子組件。
? 2噪生、分類:默認插槽舶替、具名插槽、作用域插槽
? 3杠园、使用方式:
? ? ? 1顾瞪、默認插槽:?
? ? ? ? 父組件中:
? ? ? ? ? ? <Category>
? ? ? ? ? ? ? <div>html結(jié)構(gòu)</div>
? ? ? ? ? ? </Category>
? ? ? ? 子組件中:
? ? ? ? ? ? <template>
? ? ? ? ? ? ? <div>
? ? ? ? ? ? ? ? ? //定義一個插槽
? ? ? ? ? ? ? ? ? <slot>插槽默認內(nèi)容</slot>
? ? ? ? ? ? ? </div>
? ? ? ? ? ? </template>
? ? ? 2、具名插槽:
? ? ? ? 父組件中:
? ? ? ? ? <Category>
? ? ? ? ? ? <template slot="center">?????? //當多個插槽時 選擇該結(jié)構(gòu)放入哪一個插槽
? ? ? ? ? ? ? ?? <div>html結(jié)構(gòu)1</div>
? ? ? ? ? ? </template>
? ? ? ? ? ? <template v-slot:footer>??? //當用到template時 在vue2.6中有新寫法
? ? ? ? ? ? ??????? <div>html結(jié)構(gòu)2</div>
? ? ? ? ? ? </template>
//如果沒有template抛蚁。直接在結(jié)構(gòu)上寫slot=“center”
? ? ? ? ? </Category>
? ? ? ? 子組件中:
? ? ? ? ? ? <template>
? ? ? ? ? ? ? <div>
? ? ? ? ? ? ? ? //定義插槽
? ? ? ? ? ? ? ? <slot name="center"></slot>
? ? ? ? ? ? ? ? <slot name="footer"></slot>
? ? ? ? ? ? ? </div>
? ? ? ? ? ? </template>
? ? ? 3陈醒、作用域插槽
? ? ? ? 1、理解:數(shù)據(jù)在組件的自身瞧甩,但根據(jù)數(shù)據(jù)生成的結(jié)構(gòu)需要組件的使用者來決定钉跷。(games數(shù)據(jù)在Category中,但使用數(shù)據(jù)所遍歷出來的結(jié)構(gòu)由
? ? ? ? App組件來決定)
? ? ? ? 2肚逸、具體編碼:
<slot :games="games"></slot>??? //把數(shù)據(jù)傳給插槽
//想要拿到插槽傳入的games數(shù)據(jù)?? 必須用template標簽
? 接受數(shù)據(jù) scope=“{games}”?
?????? 新寫法:slot-scope = “{games}”