内容比较多，直接上代码：
src\components\06.MyHeader\MyHeader.vue
<template>
<div class="header-container" :style="{ background: bgcolor,color: color }">
{{title || 'Header 组件'}}
</div>
</template>
<script>
export default{
name: 'MyHeader',
props:['title','color','bgcolor']
}
</script>
<style type="less" scoped>
.header-container{
height: 45px;
background-color: #00f;
color:#fff;
text-align: center;
line-height: 45px;
position: fixed;
top:0;
left:0;
width: 100%;
z-index: 999;
}
</style>
<template>
<div class="app-container">
<h1>App根组件</h1>
<hr />
<MyHeader title="黑马程序员" bgcolor="#ccc" color="#f00"></MyHeader>
</div>
</template>
<script>
import MyHeader from './06.MyHeader/MyHeader.vue'
export default{
name:'MyApp',
components:{
MyHeader
}
}
</script>
<style lang="less" scoped>
.app-container{
margin-top:45px;
}
</style>
import { createApp } from 'vue'
import App from './components/App.vue'
const app = createApp(App)
app.mount('#app')
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <link rel="icon" href="/favicon.ico" /> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Vite App</title> </head> <body> <div id="app"> </div> <script type="module" src="/src/main.js"></script> </body> </html>
标签：VUE,vue,color,App,开发,组件,MyHeader,app From： https://www.cnblogs.com/z5337/p/16838930.html