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

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


創建HeaderTop組件

2.本組件的地址是動態訊息，所以首先必須
* title來傳遞數據
* props接收數據
* slot傳遞標籤

Miste接收HeaderTop.vue組件
* import進入
* 變成組件
* 映射成標籤
* //title接收需要得內容
並把slot接收name的值

完成

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

search 組件

<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>


Order 組件

<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>


Profile 組件