三、Vue基础-组件案例一

1、实现Header案例的封装

App.vue

<template>
  <div class='app-container'>
  <h1>App根组件</h1>
  <hr>
  <my-header title="展流" bgcolor="#000" color='#fff'></my-header>
  </div>
</template>

<script>
import MyHeader from './components/MyHeader.vue'


export default{
  name:'MyApp',
  components:{
    MyHeader,
  }
}
</script>

<style lang='less' scoped>
  .app-container{
    margin-top: 45px;
  }
</style>

MyHeader.vue

<template>
  <div class="header-container" :style="{backgroundColor:bgcolor,color:color}">
    {{title || 'Header组件'}}
  </div>
</template>

<script>
export default {
    name:'MyHeader',
    props:['title','bgcolor','color']
}
</script>

<style lang='less'>
    .header-container{
        height: 45px;
        background-color: pink;
        text-align: center;
        line-height: 45px;
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        z-index: 999;
    }
</style>