021.Vue3入門，元件巢狀關係，顯示一個經典的佈局樣式

像一棵海草海草海草發表於2024-08-11
Vue元件巢狀

1、一個經典的樣式佈局

2、App.vue程式碼如下：

<template>
  <Header/>
  <Main/>
  <Aside/>
</template>

<script>
import Aside from "./view/Aside.vue";
import Main from "./view/Main.vue";
import Header from "./view/Header.vue";

export default {
  components: {
    Aside,
    Main,
    Header
  }
}
</script>

3、Header.vue程式碼如下：

<script setup>

</script>

<template>
  <h3>Header</h3>
</template>

<style scoped>
h3 {
  width: 100%;
  height: 100px;
  border: 5px solid #999;
  text-align: center;
  line-height: 100px;
  box-sizing: border-box;
}
</style>

4、Main.vue程式碼如下：

<template>
  <div class="main">
    <h3>Main</h3>
    <Article/>
    <Article/>
  </div>

</template>

<script>
import Article from "./Article.vue";

export default {
  components: {
    Article
  }
}
</script>
<style scoped>
.main {
  float: left;
  width: 70%;
  height: 600px;
  border: 5px solid #999;
  box-sizing: border-box;
}
</style>

5、Aside.vue程式碼如下：

<template>
  <div class="aside">
    <h3>Aside</h3>
    <Item/>
    <Item/>
    <Item/>
  </div>
</template>
<script>
import Item from "./Item.vue";

export default {
  components: {
    Item
  }
}
</script>

<style scoped>
.aside {
  float: right;
  width: 30%;
  height: 600px;
  border: 5px solid #999;
  box-sizing: border-box;
}
</style>

6、Article程式碼如下：

<template>
  <h3>Article</h3>
</template>

<style scoped>
h3 {
  width: 80%;
  margin: 0 auto;
  text-align: center;
  line-height: 100px;
  box-sizing: border-box;
  margin-top: 10px;
  background-color: #999;
}
</style>

7、Item程式碼如下：

<template>
  <h3>Item</h3>
</template>

<style scoped>
h3 {
  width: 80%;
  margin: 0 auto;
  text-align: center;
  line-height: 100px;
  box-sizing: border-box;
  margin-top: 10px;
  background-color: #999;
}
</style>

8、效果如下：

相關文章