今天完成的事情：

1.学习vue，进行联系

明天计划的事情：

1.学习vue，可以推进任务了

遇到的问题和收获：

1.练习了一个小玩意

实现点击时路由跳转，且每个图标和字体颜色都会改变。组件内的内容也会改变。

首先需要建立下方的TabBar组件，里面有四个选项组件。

components文件夹里放置公共组件，新建一个views文件夹放置需要修改的组件。

<div id="app">
    <tab-bar>
        <tab-bar-item path="/home" activeColor="green">
            <img slot="item-icon" src="./assets/img/TabBar/03(1).png" alt="1">
            <img slot="item-icon-active" src="./assets/img/TabBar/03(1)-active.png" alt="1">
            <div slot="item-text">首页</div>
        </tab-bar-item>
        <tab-bar-item path="/category" activeColor="green">
            <img slot="item-icon" src="./assets/img/TabBar/03(2).png" alt="1">
            <img slot="item-icon-active" src="./assets/img/TabBar/03(2)-active.png" alt="1">
            <div slot="item-text">分类</div>
        </tab-bar-item>
        <tab-bar-item path="/cart" activeColor="green">
            <img slot="item-icon" src="./assets/img/TabBar/03(3).png" alt="1">
            <img slot="item-icon-active" src="./assets/img/TabBar/03(3)-active.png" alt="1">
            <div slot="item-text">购物</div>
        </tab-bar-item>
        <tab-bar-item path="/profile" activeColor="green">
            <img slot="item-icon" src="./assets/img/TabBar/03(4).png" alt="1">
            <img slot="item-icon-active" src="./assets/img/TabBar/03(4)-active.png" alt="1">
            <div slot="item-text">我的</div>
        </tab-bar-item>
    </tab-bar>
    <router-view></router-view>
</div>

App.vue里引入。

子组件TabBarItem里需要设置插槽，将图片和文字在App.vue里插入进去。外部最好用div包裹起来，这样处于激活状态时，插槽的效果不受影响。

<template>
    <div class="tab-bar-item" @click="itemClick">
        <div v-if="!isActive">
            <slot name="item-icon"></slot>
        </div>
        <div v-else>
            <slot name="item-icon-active"></slot>
        </div>
        <div :style="activeStyle">
            <slot name="item-text"></slot>
        </div>
        <!--        插槽外加div是为了让App里面的东西替换插槽时，插槽效果不受影响-->
    </div>
</template>

<script>
    export default {
        props: {
            path: String,
            activeColor: {
                type: String,
                default: 'red'
            }
        },
        name: "TabBarItem",
        // data() {
        //     return {
        //         // isActive: true
        //     }
        // },

        computed: {
            // 计算匹配当前路径和活跃路由路径是否一致，是则传true
            isActive() {
                return this.$route.path.indexOf(this.path) !==-1
            },
            activeStyle() {
                return this.isActive ? {color: this.activeColor} : {}
            }
        },
        methods: {
            itemClick() {
                this.$router.push(this.path);
            }
        }
    }
</script>

其实关于this的指向感觉还是不是很熟悉。封装组件最大的好处是别人可以直接调用，而不需要进来修改源码，所以封装的时候需要考虑好。这个小练习需要再理解下。做这个练习是为了熟悉下vue搭建时的用法。所以接下来就推进任务了