[转]VUE 组件化开发

内容比较多，直接上代码：

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>

posted on 2022-10-29 15:57 z5337 阅读(24) 评论(0) 收藏举报