---
# System prepended metadata

title: Vue外送平台App-(slot&props使用)

---

# Vue外送平台App-(slot&props使用)
1. Header組件拆解
> slot:傳遞標籤(html)
> props:傳遞數據


分析:
1.因組件在Miste從取抽取出來

![](https://i.imgur.com/RfKkia9.png)

創建HeaderTop組件
![](https://i.imgur.com/Y36f7L7.png)

2.本組件的地址是動態訊息，所以首先必須
* title來傳遞數據
* props接收數據
* slot傳遞標籤
![](https://i.imgur.com/YZmhz16.png)

Miste接收HeaderTop.vue組件
* import進入
* 變成組件
* 映射成標籤
* //title接收需要得內容
![](https://i.imgur.com/xGAIrE9.png)
![](https://i.imgur.com/EM0zQI7.png)
並把slot接收name的值

完成 
![](https://i.imgur.com/0OnAT09.png)

因每個組件都有HeaderTop所以都必須加入三步驟

search 組件
```htmlmixed=
<template>
<section class="search">
     <!--3.-->
    <HeaderTop title="搜尋"></HeaderTop>
    <form class="search_form" action="#">
        <input type="search" name="search" placeholder="請輸入商家或美食名稱" class="search_input">
        <input type="submit" name="submit" value="送出" class="search_submit">
    </form>
</section>
</template>

<script>
    //1.
import HeaderTop from '../HeaderTop/HeaderTop'
export default {
    //2.
    components: {
        HeaderTop
    }
}
</script>
```
![](https://i.imgur.com/mucdBfI.png)

Order 組件
```htmlmixed=
<template>
<section class="order">
    <!--3.-->
    <HeaderTop title="訂單列表" />
    <section class="order_no_login">
        <img src="../Order/person.png">
        <h3>登入後查看訂單</h3>
        <button>立即登入</button>
    </section>
</section>
</template>
<script>
    //1.
import HeaderTop from '../HeaderTop/HeaderTop'
export default {
    //2/
    components: {
        HeaderTop
    }
}
</script>
```
![](https://i.imgur.com/FGbXFfz.png)

Profile 組件
![](https://i.imgur.com/Sujsq40.png)

![](https://i.imgur.com/ltmsOeF.png)










