第二章 组件编写

一、底部导航组件的编写

1-1 .router-link-active

让被点击的当前路由颜色改变

#footer ul li.router-link-active{
    color:#E54847
}

<template>
    <footer id="footer">
        <ul>
            <router-link tag="li" to="/movie" >
                <i class="iconfont icondianying1"></i>
                <p>电影</p>
            </router-link>
            <router-link tag="li" to="/cinema">
                <i class="iconfont icondianyingyuan"></i>
                <p>影院</p>
            </router-link>
            <router-link tag="li" to="/mine">
                <i class="iconfont iconicon-test"></i>
                <p>个人中心</p>
            </router-link>
        </ul>
    </footer>
</template>
<script>
export default {
    name:"TabBar"
}
</script>
<style scoped>
#footer{
    color:#666;
    border-top: 1px solid #999;
    position:fixed;
    left:0;
    bottom:0;
    height:100px;
    width:100vw;
}
.active{
    color:#E54847
}
#footer ul{
    height: 100%;
    display: flex;
}
#footer li{
    font-size: 30px;
    flex:1;
    display: flex;
    flex-direction: column;
    justify-content:space-evenly;
    align-items: center;
}
#footer i.iconfont{
    font-size: 36px !important;
}
#footer ul li.router-link-active{
    color:#E54847
}
</style>

二、父子组件的通信

Components/Header/index.vue
<template>
    <header id="header">
        <h1>{{title}}</h1>
    </header>
</template>
<script>
export default {
    name:"Header",
    props:{
        title:{
            type:String,
            default:"豆瓣电影"
        }
    }
}
</script>

//父组件通过属性给子组件传递参数
views/Movie/index.vue
<template>
  <div>
    <div>
      <Header title="豆瓣电影"></Header>
      <tab-bar></tab-bar>
    </div>
  </div>
</template>