Vue在2.6.0版本中,新增了prop slot功能。這個新功能在構建可復用組件時非常有用,它可以讓組件的使用者定義自己的內容,同時也可以讓組件在特定位置接受內容。
在Vue中,組件的模板中可以使用<slot>
標簽定義插槽,用于接受來自父組件傳遞的內容。它包含兩種類型,命名插槽和默認插槽。
命名插槽需要在<slot>
標簽中添加name
屬性,并在父組件中使用<template>
標簽來定義插槽內容:
// 子組件的模板
<div>
<slot name="header"></slot>
<p>這是子組件的內容</p>
<slot name="footer"></slot>
</div>
// 父組件中使用
<template #header>
<h1>這是插入到header插槽的內容</h1>
</template>
<template #footer>
<p>這是插入到footer插槽的內容</p>
</template>
而默認插槽則不需要name
屬性,只需要在<slot>
標簽中添加默認內容:
// 子組件的模板
<div>
<slot><p>這是默認插槽的內容</p></slot>
</div>
// 父組件中使用
<template>
<p>這是插入到默認插槽的內容</p>
</template>
通過prop slot功能,我們可以向組件中傳遞內容,并在組件中指定位置顯示傳遞的內容。這種方式使得組件更加靈活、可復用,同時也方便組件的使用者根據自己的需求來定制化組件。
上一篇post登陸vue
下一篇自動生成css3濾鏡