在前面的文章中，我們知道最基本可以透過 v-if 來進行元件的渲染與註銷，在 Vue 中，提供了一系列的用法可以讓元件切換更加的優雅，讓我們來嘗試看看吧

component is

在 Vue 中，有一個名為 component 的標籤可以透過 v-bind:is 屬性來宣告他是什麼元件，我們可以透過 computed 或是 v-for 來讓適合的內容渲染出來

<component :is="menu"></component>
<script>
export default {
    data(){
        return {
            login: false
        }
    },
    computed: {
        menu(){
            return this.login ? 'home-menu' : 'login-menu'
        }
    }
}
</script>

除了動態組件外，我們還可以透過具名插槽來將需要的內容放置到組件當中

具名插槽

元件 menu

<div class="menu">
    <slot></slot>
</div>

我們在此元件內放置了一個叫做 slot 的標籤，這意味著當我們在其他地方使用此元件時，內部輸入的內容全部會被放到 slot 內

<menu>
    <ul>
        <li>1</li>
        <li>2</li>
    </ul>
</menu>

除此之外，我們還可以提供具名插槽來讓元件更加的彈性，若有使用到該名稱的插槽就放進去，沒有就放到 default 的插槽內

<menu>
    <slot name="title"></slot>
    <slot></slot>
</menu>

外部可以透過 name 來 mapping slot

<menu>
    <template v-slot:title>
        <div>{{company_name}}</div>
    </template>
    <ul>
        <li>1</li>
        <li>2</li>
    </ul>
</menu>

透過這樣的組合，我們可以創造出是配各種場景的組件，今天的內容到此結束～