知識(shí)點(diǎn):
1.插槽作用:父向子傳遞一段Html代碼塊
2.分類:
? (1)? ?默認(rèn)插槽:規(guī)則:父給子傳猴凹,用父夷狰,不傳,用子精堕。
(2)具名插槽:適用于一個(gè)頁(yè)面有多個(gè)插槽時(shí)孵淘,需要做區(qū)分,使用name屬性歹篓。給插槽取個(gè)名字
(3)作用域插槽:使用子組件的數(shù)據(jù)瘫证,傳到父,在父改變此值庄撮,會(huì)改變子得數(shù)據(jù)背捌。(也可使用name屬性)
實(shí)現(xiàn):
1.默認(rèn)插槽:
關(guān)鍵代碼:
父:??<Children>
??????我是父組件數(shù)據(jù)
????</Children>
子:?<slot>我是默認(rèn)數(shù)據(jù)</slot>
2.具名插槽:
關(guān)鍵代碼:
父:??<Children>
??????<template?#two>我是第二個(gè)父組件值</template>
????</Children>
子:??<slot?name="two"></slot>
3.作用域插槽:
關(guān)鍵代碼:
父:??<Children>
???<template?v-slot:one="slotProps">{{slotProps.person.sex}}</template>
??????<template?v-slot:two="slotProps">{{slotProps.person.name}}</template>
????</Children>
子:??????<slot?:person="person"?name="one">{{person.name}}</slot>
??????<slot?:person="person"?name="two">{{person.age}}</slot>