終於踏入Javascript框架之Vue..(7)Slot

slot的用法

當我們要插入子組件，但又希望可以在import的子組件中添加內容，這時候就可以使用slot。

聽起來有點饒口，但我們只要把slot的內容想像成，我們可以不透過props傳遞資料，就可以直接顯示父組件想要呈現的內容，爸爸想給你一台車但又不想用你的名字買

Slot

slot是可以命名的，默認值為v-slot: default

<template v-slot:"name"></template>

<template #"name1"></template>

子組件

<template>

<slot name="name">父組件想要的位置</slot>

<template>

attributes

子元素return給父.=>return給子元素

有命名的情況下

<slotname>

<template #header="propsname">

{{propsname.message}}

</slotname>

只有一項時可再簡化成

父元素<slotname v-slot:default="propsname">

{{propsname.message}}

<slotname v-slot:"propsname">

子元素

<slot :message="returnmsg"></slot>

在下面定義returnmsg

teleport

可以直接指定要傳的目標
與slot差異：不會被包在div內，而是直接顯示出來

<teleport to ="body">
..模板內容
</teleport>