vue不具名插槽与具名插槽

vue不具名插槽与具名插槽

需求：面向未来编程，实现在未来中若出现修改内容可以简便的修改，而不需要将全部整改

思路：在组件Tabbar.vue（底部导航）当中使用不具名插槽，Tab-bar-item.vue中写具名插槽以便在App.vue中方便获取和更改

Tabbar组件:

TabBarItem组件（Tab-bar-item.vue）：

目录：

Tabbar.vue

<template>
    <div id="tabbar">
        <slot></slot>
   </div>
</template>

<script>
    export default {
        name: "Tabbar"
    }
</script>

<style scoped>
    #tabbar{
        width: 100%;
        position: fixed;
        bottom: 0;
        display: flex;
        justify-content: space-around;
        background-color: #f6f6f6;
        box-shadow: 0 -1px 1px rgba(100,100,100,.1);
    }

</style>

Tab-bar-item.vue

<template>
    <div class="tab-bar-item">
        <slot name="slot-img"></slot>
        <slot name="slot-text"></slot>
    </div>
</template>

<script>
    export default {
        name: "tab-bar-item",
        props:{
            path:String
        }
    }
</script>

<style scoped>
    @import "../../assets/css/base.css";
    .tab-bar-item{
        text-align: center;
        height: 49px;   /*移动端底部导航的固定像素，一般都是49px*/
    }
</style>

在App.vue中想使用什么就使用什么
App.vue：

<template>
 <div>
    <Tabbar>
        <TabBarItem path="/home">
            <template v-slot:slot-img>
                <img src="./assets/img/2.png" alt="">
            </template>
            <template v-slot:slot-text>
                 <div>首页</div>
            </template>
        </TabBarItem>
        <TabBarItem path="/category">
            <template v-slot:slot-img>
                <img src="./assets/img/2.png" alt="">
            </template>
            <template v-slot:slot-text>
                 <div>分类</div>
            </template>
        </TabBarItem>
        <TabBarItem path="/cart">
            <template v-slot:slot-img>
                <img src="./assets/img/2.png" alt="">
            </template>
            <template v-slot:slot-text>
                 <div>购物车</div>
            </template>
        </TabBarItem>
        <TabBarItem path="/profile">
            <template v-slot:slot-img>
                <img src="./assets/img/2.png" alt="">
            </template>
            <template v-slot:slot-text>
                 <div>我的</div>
            </template>
        </TabBarItem>
    </Tabbar>
     <router-view></router-view>
 </div>
</template>

<script>
    import Tabbar from "./components/Tabbar/Tabbar";
    import TabBarItem from "./components/Tabbar/Tab-bar-item"
    export default {
        name:'App',
        components:{
            Tabbar,
            TabBarItem
        }
    }
</script>
<style>
    .tab-bar-item img{
        width: 24px;
        height: 24px;
    }
</style>

注：下一篇为vue修改插槽的样式